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

Another way is to declare the element as !important in css.

For example.

.somediv {
  overflow: visible !important;
}

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.

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.

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.

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

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