Peristiwa klik kedua animasi animasi dalam jQuery tidak respond_jquery

Apabila menggunakan animasi untuk melakukan animasi pusing halaman klik, saya mendapati bahawa animasi acara klik kedua tidak bertindak balas, tetapi klik pertama mempunyai kesan animasi seperti berikut:

Salin kod Kod adalah seperti berikut:

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

Sebab animasi peristiwa klik kedua tidak bertindak balas: bahagian atas ialah jarak antara bahagian atas elemen halaman dan bahagian atas elemen induknya Selepas klik pertama, bahagian atas elemen halaman telah berpindah ke kedudukan -300px dari bahagian atas elemen induknya apabila diklik dua kali, bukanlah halaman itu terus bergerak -300px dari kedudukan yang dialihkan, tetapi kedudukan semasa ialah -300px dari bahagian atas elemen induknya. Jelas sekali kali pertama ia telah berpindah ke kedudukan teratas:-300px, dan kali kedua jarak pergerakan atas:-300px ialah 0, jadi tiada tindak balas.
Penyelesaian:

Salin kod Kod adalah seperti berikut:

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

atas: "-=300px", supaya klik kedua akan terus bergerak -300px ke kedudukan selepas klik pertama.

Jika jarak yang digerakkan oleh animasi ialah pembolehubah, ia tidak boleh ditulis dengan "-= nama pembolehubah":

 
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(); Dapatkan ketinggian halaman dan tetapkan kepada page_h Nilai yang diperolehi ialah nilai berangka; var page_top=parseInt($(".page").css("top")); Dapatkan jarak dari bahagian atas halaman semasa ke bahagian atas elemen induknya dan tetapkan ia ke page_top, (parseInt: alih keluar "PX" ");
var move=wrap_top page_h;

Dengan cara ini, setiap animasi akan memperoleh semula "jarak dari bahagian atas halaman semasa ke bahagian atas elemen induknya".

Nota: Nilai $(".page").height() tidak mempunyai unit px, nilai $(".page").css("top")) tidak mempunyai unit px dan memerlukan parseInt Unit piksel px unit mesti dipadamkan untuk mengira.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.