Я пытаюсь переместить некоторые элементы на странице, и во время анимации я хочу, чтобы к элементу применялось «overflow: hidden», а «overflow» обратно в «auto» после завершения анимации.
Я знаю, что 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);
});