Question

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

Answer 1

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

例如。

.somediv {
  overflow: visible !important;
}

Answer 2

这是源代码：

  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');。

将溢出设置为隐藏的原因是，动画中的元素将在动画中包含在元素中。例如，如果减少元素的宽度，其内容可能会尝试拉长并从底部“掉落”。

在上面的源代码中通过注释解释了这一点：

//确保没有任何东西偷偷溜走

希望能为您解释。

Answer 3

任何这些解决方案都适合我，但我找到了诀窍：

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

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

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

Answer 4

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

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

Answer 5

你可以通过：

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');} } );

Answer 6

PERFECT“Eagle”（2篇帖子）。如果我没有碰到你的回复，我会一直在寻找我打赌的时间。

“鹰”发表了正确的解决方法。

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

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

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

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

Answer 7

我的首选答案是使用$.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。

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

jQuery .animate（）强制样式“overflow：hidden”

7 个答案: