我想移动页面上的一些元素,同时在动画进行期间,我想对一个元素应用"overflow:hidden",并在动画完成后将"overflow"恢复为"auto"。
我知道jQuery有一个实用函数可以确定某个元素是否正在被动画化,但我无法在文档中找到它的任何信息。
我想移动页面上的一些元素,同时在动画进行期间,我想对一个元素应用"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');
};
另外,要测试某个元素是否未进行动画,您可以简单地添加一个“!”:
if (!$(element).is(':animated')) {...}
if (!$(element).is(':animated')) {...}
。 - amosmos如果您正在使用 CSS
动画,并通过特定的 class name
分配动画,则可以像这样检查:
if($("#elem").hasClass("your_animation_class_name")) {}
但一定要确保在动画结束后移除处理动画的class名称!
可以使用以下代码在动画完成后移除class名称
:
$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){
$(this).removeClass("your_animation_class_name");
});
$('selector').click(function() {
if ($(':animated').length) {
return false;
}
$("html, body").scrollTop(0);
});
:animated
伪选择器,并像这样操作:$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');
来源:https://learn.jquery.com/using-jquery-core/selecting-elements/
.css('overflow', '')
。传递空字符串通常会从元素的样式中完全删除该属性。不确定这是否是记录的行为,但这是一个非常有用的技巧。 - Ward D.S.