jQuery 的.animate() 在触发时强制使用overflow: hidden 样式，这会弄乱我的动画元素，因为我有另一个元素挂在它外面，位置为负。有没有办法避免这种情况？
【问题讨论】：
使用$('element').animate().css('overflow', 'visible'); 时，如果已经为元素指定了overflow-x 和overflow-y，则可能会导致问题。
在这些情况下使用$('element').animate().css('overflow', '');，它只是删除溢出属性并保持overflow-x 和overflow-y 不变。
【讨论】：
我的首选答案是使用$.Animation.prefilter。
Here is a jsfiddle.net example.
设置前置过滤器：
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 中已经存在了一段时间，但文档似乎并不完整。但是draft documentation is available。
【讨论】：
完美的“鹰”（2 个帖子）。如果我没有看到你的回复，我敢打赌，我会搜索几个小时。
“Eagle”发布了解决此问题的正确方法。
所有其他解决方案都只是技巧。这是正确的方法（重申），这就是为什么他们在使用“动画”类时为您提供所有选项。
以下是一些可用的设置（来自文档，https://api.jquery.com/animate/）。我需要“完成”设置来在动画完成时执行操作。
duration (default: 400)
easing (default: swing)
queue (default: true)
specialEasing
step
progress
complete
start
done
fail
always
这将使动画处理变得更加容易，无论是否需要，我都会使用这种格式，用于将来的所有动画。
【讨论】：
这些解决方案中的任何一个都对我有用，但我找到了诀窍：
$(myDiv).animate(
{ height: newHeight},
{ duration: 500,
queue: false,
easing: 'easeOutExpo',
step: function() {
$(myDiv).css("overflow","visible");
}
}
);
在动画的每个步骤中强制 css。希望对您有所帮助。
【讨论】：
你可以通过：
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');} } );
【讨论】：
另一种方法是在css中将元素声明为!important。
例如。
.somediv {
overflow: visible !important;
}
【讨论】：
这是源代码：
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');。
将溢出设置为隐藏的原因是，正在动画的元素中的元素将在动画时包含在元素中。例如，如果您减小元素的宽度，则其内容可能会尝试拉长并从底部“掉出”。
这在上面的源代码中通过注释进行了解释：
// 确保没有东西溜出去
希望能为你解释。
【讨论】：