The second click event of animate animation in jQuery does not respond_jquery

When using animate to do click page turning animation, I found that the second click event animation did not respond, but the first click had animation effects. The code is as follows:

Copy code The code is as follows:

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

The reason why the animation of the second click event 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 moved to a position of -300px from the top of its parent element. When clicked twice, it is not that the page continues to move -300px from the moved position, but the current position is -300px from the top of its parent element. Obviously the first time it has moved to the position of top:-300px, and the second time the top:-300px movement distance is 0, so there is no response.
Solution:

Copy code The code is as follows:

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

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

If the distance moved by the animation is a variable, it cannot be written with "-= 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 it to page_h. The value obtained is a numerical value;
var page_top=parseInt($(".page").css("top")); Get 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, each animation will re-obtain the "distance from the top of the current page to the top of its parent element".

Note: The value of $(".page").height() does not have px unit, the value of $(".page").css("top")) does not have px unit, and requires parseInt The unit px pixel unit must be deleted to calculate.

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