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

jQuery's .animate() forces the style overflow: hidden when 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?

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.

You can pass :

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

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

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

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

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 overflow because jQuery uses that internally.

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

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

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

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

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.

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.

    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.