我正在尝试移动页面上的某些元素,并且在动画发生时,我希望将“ overflow:hidden”应用于元素,并在动画完成后将“ overflow”变回“ auto”。
我知道jQuery有一个实用程序功能,该功能确定某个元素是否处于动画状态,但是我无法在文档中的任何位置找到它
我正在尝试移动页面上的某些元素,并且在动画发生时,我希望将“ overflow:hidden”应用于元素,并在动画完成后将“ overflow”变回“ auto”。
我知道jQuery有一个实用程序功能,该功能确定某个元素是否处于动画状态,但是我无法在文档中的任何位置找到它
Answers:
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
动画,并使用specific指定了动画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);
});