ฉันจะทราบได้อย่างไรว่า jQuery องค์ประกอบกำลังเคลื่อนไหวอยู่

ฉันกำลังพยายามย้ายองค์ประกอบบางอย่างในหน้าและในช่วงเวลาที่ภาพเคลื่อนไหวเกิดขึ้นฉันต้องการให้ใช้ "overflow: hidden" กับ elemnt และ "overflow" กลับเป็น "auto" เมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์

ฉันรู้ว่า jQuery มีฟังก์ชั่นยูทิลิตี้ที่กำหนดว่าองค์ประกอบบางอย่างเคลื่อนไหวได้หรือไม่ แต่ฉันไม่พบที่ใดในเอกสาร

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

ข้อมูลเพิ่มเติม : https://api.jquery.com/animate-selector/

หรือ:

$(elem)
    .css('overflow' ,'hidden')
    .animate({/*options*/}, function(){
        // Callback function
        $(this).css('overflow', 'auto');
    };

หรือหากต้องการทดสอบว่าสิ่งที่ไม่เคลื่อนไหวหรือไม่คุณสามารถเพิ่ม "!":

if (!$(element).is(':animated')) {...}

หากคุณใช้cssภาพเคลื่อนไหวและกำหนดภาพเคลื่อนไหวโดยใช้เฉพาะclass nameคุณสามารถตรวจสอบได้ดังนี้:

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

แต่ตรวจสอบให้แน่ใจว่าคุณกำลังลบชื่อคลาสซึ่งกำลังจัดการแอนิเมชั่นอยู่หลังจากที่แอนิเมชั่นเสร็จสิ้น!

รหัสนี้สามารถใช้เพื่อลบclass nameหลังจากภาพเคลื่อนไหวเสร็จสิ้น:

$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){ 
        $(this).removeClass("your_animation_class_name");
});

หากคุณต้องการใช้ css กับองค์ประกอบที่เคลื่อนไหวคุณสามารถใช้:animatedตัวเลือกหลอกและทำเช่นนี้

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

แหล่งที่มา: https://learn.jquery.com/using-jquery-core/selecting-elements/

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

  $("html, body").scrollTop(0);
});