jQueryでアニメイト動画の2回目のクリックイベントは反応しませんでした

animateでページをめくるアニメーションをクリックすると、2回目のクリックイベントアニメーションは反応しなかったが、1回目のクリックはアニメーション効果があり、コードは以下の通りである.

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

2回目のクリックイベントアニメーションが反応しなかった原因:topはpage要素の頂部とその親要素の頂部との距離であり、1回目のクリック後、page要素の頂部はすでにその親要素の頂部-300 pxから離れた位置に移動し、2回目のクリック時のpageの移動後の位置はt移動-300 pxに続くのではなく、現在の位置はその親要素の頂部-300 pxによる.明らかに1回目はtop:-300 pxの位置に移動し、2回目のtop:-300 pxの移動距離は0なので反応しなかった.解決方法:

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

top:「-=300 px」で、2回目のクリック時に1回目のクリック後の位置で-300 pxを移動し続けます.
アニメーションの移動距離が変数の場合は、-=変数名では書けません.

 
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();pageの高さを取得し、pageに値を割り当てます.h、得られた値は数値である.var page_top=parseInt($(".page").css("top"));現在のpageの上部から親要素の上部までの距離を取得し、page_に値を割り当てます.top,(parseInt:“PX”を取り除く);var move=wrap_top+page_h;移動距離を計算します.
これにより、アニメーションのたびに「現在のpageの上部から親要素の上部までの距離」が再取得されます.
注意:$(「.page」).Height()の値はpx単位を持たない,$(".page").css(「top」)の値はpx単位付きであり、parseIntが単位px画素単位を削除して計算する必要がある.
以上が本文のすべてですが、お好きになってください.