jQuery animate animation has no response to the second click event

  • 2020-06-07 04:00:38
  • OfStack

When using animate to do the page turning animation, it was found that the second click event animation did not respond, while the first click had animation effect. The code is as follows:


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

Second click event animation't respond: top is page element at the top of the elements of his father with the top of the distance, after the first click, page element at the top has been moved to from his father, the position of the element at the top - 300 px second click when not page after moving the location of the continue t px mobile - 300, but the current position according to their parent px top - 300. Obviously, the first time has moved to the position of top: -300ES16en, and the second time has moved to the position of top: -300ES18en with a distance of 0, so there is no reaction.
Solutions:


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

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

If the distance the animation moves is a variable, it cannot be written as -= variable name:


 
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}, 800, 'easeInOutExpo');
};

var page_h = $(". page "). height (); Get the height of page and assign the value to page_h. The value obtained is a value.
var page_top = parseInt ($(". page "). css (" top ")); Gets the distance from the top of the current page to the top of its parent element and assigns page_top (parseInt: remove "PX");
var move = wrap_top + page_h; Calculate the distance traveled;

Each animation retrieves the "current distance from the top of page to the top of its parent element".

Note: the value of $(".page ").height () is without px units. The value of $(".page ").css ("top") is with px units. parseInt needs to delete px units to calculate.

This is the end of this article, I hope you enjoy it.


Related articles: