jQuery のアニメーションアニメーションの 2 回目のクリックイベントが応答しない_jquery

animate を使用してクリック ページめくりアニメーションを実行すると、2 番目のクリック イベント アニメーションは応答しませんでしたが、最初のクリックにはアニメーション効果があったことがわかりました。コードは次のとおりです。

コードをコピーします コードは次のとおりです:

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

2 回目のクリック イベントのアニメーションが応答しない理由: トップは、最初のクリック後、ページ要素の上部とその親要素の上部の間の距離です。親要素の先頭から -300px の位置 2 回クリックすると、ページは移動した位置から -300px 移動し続けるのではなく、現在の位置は親要素の先頭から -300px になります。当然ですが、1回目はtop:-300pxの位置に移動しており、2回目はtop:-300pxの移動距離が0なので反応がありません。
解決策:

コードをコピーします コードは次のとおりです:

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

top: "-=300px"。2 回目のクリックでも最初のクリック後の位置に -300px 移動し続けます。

アニメーションによる移動距離が変数の場合、「-=変数名」で記述することはできません:

 
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_h に代入します。 var page_top=parseInt($(".page").css("top")); 現在のページの先頭から親要素の先頭までの距離を取得し、それを page_top に割り当てます (parseInt: "PX" を削除します) ");
var move=wrap_top page_h; 移動距離を計算します。

このようにして、各アニメーションは「現在のページの先頭から親要素の先頭までの距離」を再取得します。

注: $(".page").height() の値には px 単位がありません。$(".page").css("top")) の値には px 単位がありません。計算するには、parseInt 単位の px ピクセル単位を削除する必要があります。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。