Tôi đang cố gắng di chuyển một số phần tử trên trang và trong thời gian hoạt ảnh xảy ra, tôi muốn áp dụng "tràn: ẩn" cho một elemnt và "tràn" trở lại "tự động" sau khi hoạt ảnh hoàn tất.
Tôi biết jQuery có một chức năng tiện ích xác định xem một số phần tử có đang được làm động hay không nhưng tôi không thể tìm thấy nó ở bất kỳ đâu trong tài liệu
Câu trả lời:
if( $(elem).is(':animated') ) {...}Thông tin thêm : https://api.jquery.com/animated-selector/
Hoặc là:
$(elem)
.css('overflow' ,'hidden')
.animate({/*options*/}, function(){
// Callback function
$(this).css('overflow', 'auto');
};
.css('overflow', ''). Truyền một chuỗi rỗng thường loại bỏ hoàn toàn thuộc tính đó khỏi style của phần tử. Không chắc đây có phải là hành vi được ghi lại hay không, nhưng đó là một thủ thuật rất hữu ích.
Ngoài ra, để kiểm tra xem nội dung nào đó không hoạt hình, bạn có thể chỉ cần thêm dấu "!":
if (!$(element).is(':animated')) {...}if (!$(element).is(':animated')) {...}
nếu bạn đang sử dụng csshoạt ảnh và chỉ định hoạt ảnh bằng cách sử dụng cụ thể class name, thì bạn có thể kiểm tra nó như sau:
if($("#elem").hasClass("your_animation_class_name")) {}Nhưng hãy đảm bảo rằng bạn đang xóa tên lớp mà 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 để xóa class namesau khi hoạt ảnh kết thúc:
$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){
$(this).removeClass("your_animation_class_name");
});
Nếu bạn muốn áp dụng css cho các phần tử động, bạn có thể sử dụng :animatedbộ chọn giả và thực hiện như thế này,
$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');
nguồn: https://learn.jquery.com/using-jquery-core/selecting-elements/
$('selector').click(function() {
if ($(':animated').length) {
return false;
}
$("html, body").scrollTop(0);
});