jQuery .animate() 强制样式“溢出：隐藏”

jQuery .animate() forces style "overflow:hidden"

提问by PulledBull

jQuery's .animate()forces the style overflow: hiddenwhen triggered, messing with my animated element because I have another element that's hanging, with negative position, outside of it. is there anyway to avoid that?

jQuery 会在触发时.animate()强制样式overflow: hidden，弄乱了我的动画元素，因为我有另一个元素悬挂在它外面，位置为负。有没有办法避免这种情况？

回答by Andrew Rosolino

Another way is to declare the element as !importantin css.

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

For example.

例如。

.somediv {
  overflow: visible !important;
}

回答by Nick Brunt

This is the source code:

这是源代码：

  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";
}

You can comment this out if you want, or simply use $('element').animate().css('overflow', 'visible');as previously suggested.

如果需要，您可以将其注释掉，或者$('element').animate().css('overflow', 'visible');按照之前的建议直接使用。

The reason the overflow is set to hidden is so that elements within the one being animated will be contained within the element whilst it is being animated. For instance, if you reduce an element's width, its contents might try to elongate and "fall" out the bottom.

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

This is explained in the source code above by the comment:

这在上面的源代码中由注释解释：

// Make sure that nothing sneaks out

// 确保没有任何东西溜出

Hope that explains it for you.

希望能为你解释。

回答by Eagle

Any of those solutions worked for me, but I found the trick:

这些解决方案中的任何一个都对我有用，但我找到了诀窍：

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

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

Force the css in each step of the animation. Hope it helps.

在动画的每个步骤中强制使用 css。希望能帮助到你。

回答by tetradb

When using $('element').animate().css('overflow', 'visible');it can cause problems if overflow-xand overflow-yare already specified for the element.

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

In those cases use $('element').animate().css('overflow', '');which just removes the overflow attribute and keeps the overflow-xand overflow-yintact.

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

回答by Roger Gajraj

You can pass :

你可以通过：

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

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

to the .animate() options parameter, as a function to run when animation is 'complete', like so:

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

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

回答by Scott Cleland

PERFECT "Eagle" (2 Posts Up). If I didn't run across your reply I would have been searching for hours for this I bet.

完美的“鹰”（2 个帖子）。如果我没有遇到你的回复，我打赌我会为此搜索几个小时。

"Eagle" Posted the correct way to go about this.

“Eagle”发布了解决此问题的正确方法。

All the other solutions are just hacks. This was the correct way (reiterating), that is why they give you all the options when using the "animate" class.

所有其他解决方案都只是黑客。这是正确的方法（重申），这就是为什么他们在使用“animate”类时为您提供所有选项。

Below are some of the settings available (from the documentation, https://api.jquery.com/animate/). I needed the "complete" setting to perform an action when the animation was finished.

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

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

This is going to make working with animations much easier and I will be using this format whether or not it is needed, for all animations in the future.

这将使处理动画变得更加容易，无论是否需要，我都会在未来的所有动画中使用这种格式。

回答by phylae

My preferred answer is to use $.Animation.prefilter. Here is a jsfiddle.net example.

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

Set up the prefilter:

设置前置过滤器：

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

Then use it

然后使用它

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

Note that you cannot use the option name overflowbecause jQuery uses that internally.

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

Although this feature has been around in jQuery for a while, it seems that the documentation is not complete. But draft documentation is available.

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

Also see https://github.com/jquery/api.jquery.com/issues/256

另见https://github.com/jquery/api.jquery.com/issues/256