Bagaimana cara mengetahui dengan jQuery jika sebuah elemen sedang dianimasikan?

101

Saya mencoba untuk memindahkan beberapa elemen pada halaman, dan selama animasi terjadi, saya ingin "overflow: hidden" diterapkan ke elemnt, dan "overflow" kembali ke "auto" setelah animasi selesai.

Saya tahu jQuery memiliki fungsi utilitas yang menentukan apakah beberapa elemen sedang dianimasikan tetapi saya tidak dapat menemukannya di mana pun di dokumen

javascript jquery animation
sumber

Jawaban:

199 
if( $(elem).is(':animated') ) {...}

Info lebih lanjut : https://api.jquery.com/animated-selector/

Atau:

$(elem)
    .css('overflow' ,'hidden')
    .animate({/*options*/}, function(){
        // Callback function
        $(this).css('overflow', 'auto');
    };
James
sumber
ya itu dia, terima kasih. bagaimana saya bisa melewatkannya? Sial, aku semakin tua
FYI, jika Anda tidak ingin mengambil risiko menimpa gaya CSS Anda dengan memprogram "overflow: auto" di callback, cukup gunakan .css('overflow', ''). Meneruskan string kosong umumnya menghapus properti itu dari gaya elemen sama sekali. Tidak yakin apakah ini perilaku yang terdokumentasi, tetapi ini adalah trik yang sangat berguna.
Lingkungan DS
2
Saya tidak berpikir itu mendukung animasi CSS.
Gqqnbig
5

Atau, untuk menguji apakah ada sesuatu yang tidak dianimasikan, Anda cukup menambahkan "!":

if (!$(element).is(':animated')) {...}
Tim
sumber
Ini sangat tidak benar ... Kebalikan dari jquery 'is' is not 'not' not '. 'tidak' menghapus elemen yang difilter dari objek jquery. Jika Anda ingin memeriksa objek bukan animasi yang Anda lakukanif (!$(element).is(':animated')) {...}
amosmos
1
@amosmos Jawabannya telah diedit dan komunitas disetujui .. Saya telah mengembalikannya ke tempat yang benar.
Tagihan
2
Bagus, hanya sekarang ini adalah duplikat dari jawaban yang diterima. BTW apa artinya disetujui komunitas?
amosmos
@amosmos stop trolling
Eric Cicero
1

Jika Anda menggunakan cssanimasi dan menetapkan animasi dengan menggunakan spesifik class name, maka Anda dapat memeriksanya seperti ini:

if($("#elem").hasClass("your_animation_class_name")) {}

Tapi pastikan Anda menghapus nama kelas yang menangani animasi, setelah animasi selesai!

Kode ini dapat digunakan untuk menghapus class namesetelah animasi selesai:

$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){ 
        $(this).removeClass("your_animation_class_name");
});
Ari
sumber
OP menggunakan animaiton jQuery.
Michał Perłakowski
hanya menyarankan alternatif. Dan apakah maksudmu animasi?
Ari
Ya, maksud saya animasi. IMO jawaban Anda benar-benar di luar topik.
Michał Perłakowski
0

Jika Anda ingin menerapkan css ke elemen animasi, Anda dapat menggunakan :animatedpseudo selector dan melakukannya seperti ini,

$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');

sumber: https://learn.jquery.com/using-jquery-core/selecting-elements/

Beruntung
sumber
0 
$('selector').click(function() {
  if ($(':animated').length) {
    return false;
  }

  $("html, body").scrollTop(0);
});
anand vishwakarma
sumber
Meskipun kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang bagaimana dan / atau mengapa kode ini memecahkan masalah akan meningkatkan nilai jangka panjang jawaban. Silakan baca cara menjawab ini untuk memberikan jawaban yang berkualitas.
thewaywewere