jQuery .animate（）强制样式“溢出：隐藏”

jQuery会在触发时.animate()强制样式overflow: hidden，使我的动画元素混乱，因为我的另一个元素以负位置悬挂在其外部。反正是有避免的方法吗？

另一种方法是在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');按照先前的建议使用。

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

上面的源代码中通过注释对此进行了解释：

//确保没有偷偷溜走

希望能为您解释。

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

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

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

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

当使用$('element').animate().css('overflow', 'visible');是否会导致问题overflow-x，并overflow-y已经为元素指定。

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

您可以通过：

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

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

完美的“ Eagle”（2个帖子）。如果我没有收到您的答复，我会一直在寻找这个问题的时间。

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

所有其他解决方案都只是黑客。这是正确的方法（重复），这就是为什么使用“动画”类时它们会为您提供所有选项的原因。

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

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

这将使处理动画更加容易，并且将来我将在所有动画中使用是否需要使用这种格式。