The second click event of the animate animation in jQuery does not respond _ jquery

This article mainly introduces the solution for the second click event of the animate animation in jQuery, which is very practical, if you have any need, you can refer to the following code to see if the animation of the second click event does not respond when you use animate to perform a Page Flip Animation. The First Click has an animation effect. the code is as follows:

The code is as follows:

$ (". Page"). stop (). animate ({top: "-300px"}, 800, 'easeinoutexpo ');

The reason why the second click event animation does not respond: top is the distance between the top of the page element and the top of its parent element. after the first click, the top of the page element has been moved to the position-px from the top of its parent element, the second click does not mean that the page continues t-300px after moving, but the current position is based on the top of its parent element-300px. Apparently the first time has been moved to the top:-300px position, and the second top:-300px moving distance is 0, so there is no response.
Solution:

The code is as follows:

$ (". Page"). stop (). animate ({top: "-= 300px"}, 800, 'easeinoutexpo ');

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

If the animation's moving distance is a variable, you cannot use "-= variable name" to write it:

 function down() {var page_h=$(".page").height(); //687var page_top=parseInt($(".page").css("top")); //0var move=wrap_top+page_h;$(".page").stop().animate({top:move}, 800, 'easeInOutExpo');};

Var page_h = $ (". page"). height (); obtain the height of the page and assign it to page_h. the obtained value is a numerical value;
Var page_top = parseInt ($ (". page ").css (" top "); obtain the distance from the top of the current page to the top of its parent element and assign it to page_top (parseInt: remove" PX ");
Var move = wrap_top + page_h; calculate the moving distance;

In this way, "the distance from the top of the current page to the top of its parent element" is retrieved again for each animation ".

Note: $ (". page "). the value of height () is not in px unit, $ (". the value of page ").css (" top ") is in px units, which can be calculated only when the unit is deleted by parseInt.

The above is all the content of this article. I hope you will like it.