Làm cách nào để tìm hiểu với jQuery nếu một phần tử đang được làm động?

Question

Tôi đang cố gắng di chuyển một số thành phần trên trang và trong thời gian hoạt ảnh xảy ra, tôi muốn áp dụng "overflow: hidden" cho elemnt và "overflow" quay lại "auto" khi hoạt ảnh hoàn tất .

Tôi biết jQuery có một chức năng tiện ích mà sẽ xác định xem một số yếu tố đã được hoạt hình nhưng tôi không thể tìm thấy nó ở bất cứ đâu trong tài liệu

Answer 1

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

Thông tin thêm: http://docs.jquery.com/Selectors/animated

---

Hoặc:

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

Answer 2

Cách khác , Để kiểm tra nếu có điều gì là không sinh động, bạn có thể chỉ cần thêm một "!":

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

Answer 3

nếu bạn đang sử dụng css hoạt hình và gán các hình ảnh động bằng cách sử dụng cụ thể class name, sau đó bạn có thể kiểm tra xem nó như thế này:

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

Nhưng hãy chắc chắn rằng bạn đang loại bỏ tên lớp đang xử lý hoạt ảnh, sau khi hoạt ảnh kết thúc!

Mã này có thể được sử dụng để loại bỏ các class name sau khi hình ảnh động kết thúc:

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

Answer 4

Nếu bạn muốn áp dụng css để các yếu tố hoạt hình, bạn có thể sử dụng bộ chọn :animated giả và làm điều đó như thế này,

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

nguồn: https://learn.jquery.com/using-jquery-core/selecting-elements/

Answer 5

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

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