Próbuję przenieść niektóre elementy na stronę, ale w czasie trwania animacji chcę, aby do elementu zastosowano „przepełnienie: ukryte”, a po zakończeniu animacji „przepełnienie” z powrotem na „auto”.
Wiem, że jQuery ma funkcję narzędzia, która określa, czy jakiś element jest animowany, ale nie mogę go znaleźć nigdzie w dokumentacji
Odpowiedzi:
if( $(elem).is(':animated') ) {...}Więcej informacji : https://api.jquery.com/animated-selector/
Lub:
$(elem)
.css('overflow' ,'hidden')
.animate({/*options*/}, function(){
// Callback function
$(this).css('overflow', 'auto');
};.css('overflow', ''). Przekazanie pustego ciągu generalnie całkowicie usuwa tę właściwość ze stylu elementu. Nie jestem pewien, czy jest to udokumentowane zachowanie, ale jest to bardzo przydatna sztuczka.
Alternatywnie, aby sprawdzić, czy coś nie jest animowane, możesz po prostu dodać znak „!”:
if (!$(element).is(':animated')) {...}if (!$(element).is(':animated')) {...}
jeśli używasz cssanimacji i przypisujesz animację przy użyciu określonego class name, możesz to sprawdzić w ten sposób:
if($("#elem").hasClass("your_animation_class_name")) {}Ale upewnij się, że usuwasz nazwę klasy, która obsługuje animację, po zakończeniu animacji!
Ten kod może służyć do usuwania class namepo zakończeniu animacji:
$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){
$(this).removeClass("your_animation_class_name");
});Jeśli chcesz zastosować css do animowanych elementów, możesz użyć :animatedpseudo selektora i zrobić to w ten sposób:
$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');źródło: https://learn.jquery.com/using-jquery-core/selecting-elements/
$('selector').click(function() {
if ($(':animated').length) {
return false;
}
$("html, body").scrollTop(0);
});