Animate animation Second Click event in jquery no response

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