Sayfadaki bazı öğeleri taşımaya çalışıyorum ve animasyonun gerçekleştiği süre boyunca bir elemnt'e "taşma: gizli" uygulanmasını ve animasyon tamamlandığında "taşma" nın "otomatik" e geri dönmesini istiyorum.
JQuery'nin bazı öğelerin canlandırılıp canlandırılmadığını belirleyen bir yardımcı program işlevi olduğunu biliyorum, ancak bunu belgelerin hiçbir yerinde bulamıyorum
Yanıtlar:
if( $(elem).is(':animated') ) {...}Daha fazla bilgi : https://api.jquery.com/animated-selector/
Veya:
$(elem)
.css('overflow' ,'hidden')
.animate({/*options*/}, function(){
// Callback function
$(this).css('overflow', 'auto');
};.css('overflow', ''). Boş bir dizenin iletilmesi genellikle bu özelliği öğenin stilinden tamamen kaldırır. Bunun belgelenmiş bir davranış olup olmadığından emin değilim, ama çok faydalı bir hile.
Alternatif olarak, bir şeyin animasyonlu olup olmadığını test etmek için bir "!" Ekleyebilirsiniz:
if (!$(element).is(':animated')) {...}if (!$(element).is(':animated')) {...}
cssAnimasyon kullanıyorsanız ve animasyonu belirli bir şekilde class nameatarsanız, şu şekilde kontrol edebilirsiniz:
if($("#elem").hasClass("your_animation_class_name")) {}Ancak, animasyon bittikten sonra animasyonu işleyen sınıf adını kaldırdığınızdan emin olun!
Bu kod class name, animasyon bittikten sonra kaldırmak için kullanılabilir :
$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){
$(this).removeClass("your_animation_class_name");
});Animasyonlu öğelere css uygulamak istiyorsanız :animatedsözde seçiciyi kullanabilir ve şu şekilde yapabilirsiniz,
$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');kaynak: https://learn.jquery.com/using-jquery-core/selecting-elements/
$('selector').click(function() {
if ($(':animated').length) {
return false;
}
$("html, body").scrollTop(0);
});