Animate animation Second Click event in jquery no response

Source: Internet
Author: User
Tags numeric value

This article mainly introduced jquery animate animation second Click event unresponsive solution, very practical, the need for small partners can refer to the

Using animate to do the click-Flip animation found that the second click event Animation did not respond, and the first click has animation effect, the code is as follows:

The code is as follows:

$ (". Page"). Stop (). Animate ({top: " -300px"}, A, ' easeinoutexpo ');

The second click event Animation did not respond to the reason: the top is the distance from the front of the page element to the top of its parent, and after the first click, the top of the page is moved to the position of the top of its parent element, and the second click is not the page -300px the move -300px, Instead, the current position is -300px at the top of its parent element. Obviously the first time has moved to the top:-300px position, the second top:-300px move distance is 0, therefore does not respond.

Workaround:

The code is as follows:

$ (". Page"). Stop (). Animate ({top: "-=300px"}, A, ' easeinoutexpo ');

Top: "-=300px" so that the second click will continue to move -300px after the first click.

If the animation is moving at a variable distance, it cannot be written with the "-= variable name":

?

1 2 3 4 5 6 7 function down () {var page_h=$ ('. Page '). Height ();//687 var page_top=parseint ($ (". Page"). CSS ("top");//0 var move=wrap_ Top+page_h; $ (". Page"). Stop (). Animate ({Top:move}, a, ' easeinoutexpo '); };

var page_h=$ (". Page"). Height (); Gets the height of the page and assigns the value to Page_h, which is the numeric value;

var page_top=parseint ($ (". Page"). CSS ("top"); Gets the distance at the top of the current page to its parent element and assigns it to Page_top, (parseint: Remove "PX");

var move=wrap_top+page_h, calculating the moving distance;

This way, each animation retrieves the distance from the top of the current page to the top of its parent element.

Note: $ (". Page"). The value of height () is not in PX units, $ (". Page"). The value of the CSS ("top") is a PX unit, which requires parseint unit PX pixel units to be deleted to calculate.

The above mentioned is the entire content of this article, I hope you can enjoy.

Note < > : More Wonderful tutorials please focus on Triple programming

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.