jQuery .animate()强制样式"overflow:hidden"

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.希望能帮助到你.