Я намагаюся перемістити деякі елементи на сторінці, і під час часу, коли відбувається анімація, я хочу, щоб "переповнення: приховано" застосовано до елементу, і "переповнення" повернулося до "авто", коли анімація буде завершена.
Я знаю, що jQuery має функцію утиліти, яка визначає, чи якийсь елемент анімується, але я не можу його знайти ніде в документах
Відповіді:
if( $(elem).is(':animated') ) {...}Більше інформації : https://api.jquery.com/animated-selector/
Або:
$(elem)
.css('overflow' ,'hidden')
.animate({/*options*/}, function(){
// Callback function
$(this).css('overflow', 'auto');
};.css('overflow', ''). Передача порожнього рядка взагалі видаляє це властивість зі стилю елемента. Не впевнений, чи це документоване поведінка, але це дуже корисна хитрість.
Крім того, щоб перевірити, чи щось не анімоване, ви можете просто додати "!":
if (!$(element).is(':animated')) {...}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);
});