Animate()强制样式“ overflow: hide”

JQuery 的 .animate()在触发时强制使用样式 overflow: hidden，这会扰乱我的动画元素，因为我有另一个元素挂在它的外面，位置是负的。有什么办法可以避免这种情况吗？

30642 次浏览
小开

这是源代码:

  if ( isElement && ( p === "height" || p === "width" ) ) {
// Make sure that nothing sneaks out
// Record all 3 overflow attributes because IE does not
// change the overflow attribute when overflowX and
// overflowY are set to the same value
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];
...
...
...
}


if ( opt.overflow != null ) {
this.style.overflow = "hidden";
}

如果需要，您可以将其注释掉，或者像前面建议的那样简单地使用 $('element').animate().css('overflow', 'visible');。

溢出被设置为隐藏的原因是，被动画元素中的元素将包含在被动画元素中。例如，如果你减少了一个元素的宽度，它的内容可能会试图拉长并从底部“下降”。

这在上面的源代码中通过注释得到了解释:

确保没有任何东西溜出来

希望你能明白。

小开

另一种方法是在 css 中将元素声明为 ! 重要的。

比如说。

.somediv {
overflow: visible !important;
}
小开

你可以通过:

function(e){$('#something').css('overflowY', 'scroll');}

到. animate ()选项参数，作为动画“完成”时运行的函数，如下所示:

$('#something').animate({
width: '100px',
height: '100px',
overflowY: 'scroll !important' //doesn't work
}, { duration: 500, queue: false, complete: function(e){$('#something').css('overflowY', 'scroll');} } );
小开

这些解决方案中的任何一个对我都有效，但我发现了诀窍:

$(myDiv).animate(
{ height: newHeight},
{ duration: 500,
queue: false,
easing: 'easeOutExpo',


step: function() {
$(myDiv).css("overflow","visible");
}
}
);

在动画的每个步骤中强制使用 css。希望有所帮助。

小开

完美的“鹰”(2张贴起来)。如果我没有看到你的回复，我打赌我已经为此搜索了几个小时。

“老鹰”发布了正确的方法。

所有其他的解决方案都只是黑客技术。这是正确的方式(重复) ，这就是为什么他们给你所有的选项时，使用“动画”类。

下面是一些可用的设置(来自文档 https://api.jquery.com/animate/)。我需要的“完整”设置，以执行一个动作时，动画完成。

    duration (default: 400)
easing (default: swing)
queue (default: true)
specialEasing
step
progress
complete
start
done
fail
always

这将使动画工作更加容易，我将使用这种格式，无论是否需要，为所有的动画在未来。

小开

我的首选答案是使用 $.Animation.prefilter。 下面是一个 jsfiddle.net 示例。

设置预过滤器:

jQuery.Animation.prefilter(function(element, properties, options) {
if (options.overrideOverflow) {
jQuery(element).css("overflow", options.overrideOverflow);
}
});

那就好好利用

$(myDiv).animate(
{ height: newHeight},
{
duration: 500,
overrideOverflow: "visible" // Replace "visible" with your desired overflow value
}
);

注意，不能使用选项名 overflow，因为 jQuery 在内部使用它。

虽然这个特性在 jQuery 中已经存在了一段时间，但是文档似乎并不完整。但是 文件草稿已备妥。

也请参阅 https://github.com/jquery/api.jquery.com/issues/256

小开

当使用 $('element').animate().css('overflow', 'visible');时，如果已经为元素指定了 overflow-x和 overflow-y，则可能会导致问题。

在这些情况下，使用 $('element').animate().css('overflow', '');只是删除了溢出属性，并保持 overflow-x和 overflow-y的完整性。


提交答案