Le deuxième événement de clic d'animation dans jQuery ne répond pas_jquery

Lors de l'utilisation d'animate pour effectuer une animation de changement de page de clic, j'ai constaté que l'animation du deuxième événement de clic ne répondait pas, mais que le premier clic avait des effets d'animation. Le code est le suivant :

Copier le code Le code est le suivant :

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

La raison pour laquelle l'animation du deuxième événement de clic ne répond pas : top est la distance entre le haut de l'élément de page et le haut de son élément parent. Après le premier clic, le haut de l'élément de page s'est déplacé vers. une position de -300px du haut de son élément parent. Lorsque vous cliquez deux fois, ce n'est pas que la page continue de se déplacer de -300px de la position déplacée, mais la position actuelle est de -300px du haut de son élément parent. Évidemment, la première fois, il s'est déplacé vers la position top:-300px, et la deuxième fois, la distance de mouvement top:-300px est de 0, donc il n'y a pas de réponse.
Solution :

Copier le code Le code est le suivant :

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

haut : "-=300px", pour que le deuxième clic continue de déplacer -300px vers la position après le premier clic.

Si la distance parcourue par l'animation est une variable, elle ne peut pas être écrite avec "-= nom de la variable" :

 
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(); Récupère la hauteur de la page et attribuez-la à page_h La valeur obtenue est une valeur numérique ; var page_top=parseInt($(".page").css("top")); Obtenez la distance entre le haut de la page actuelle et le haut de son élément parent et attribuez-la à page_top, (parseInt : supprimez "PX ");
var move=wrap_top page_h; Calculer la distance de déplacement

De cette façon, chaque animation obtiendra à nouveau la "distance du haut de la page actuelle au haut de son élément parent".

Remarque : La valeur de $(".page").height() n'a pas d'unité px, la valeur de $(".page").css("top")) n'a pas d'unité px, et nécessite parseInt L'unité px pixel doit être supprimée pour calculer.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.