Delay, Animate, CSS Bug

[tom@…]

Inspect the element .block as it goes to make the black box smaller... you will notice overflow: hidden ends up getting set instead (default jquery feature)... but on the other animation (expanding) there is no delay and the override for setting .css('overflow', 'visible') works.

Example: ​http://jsfiddle.net/8TdzP/

End result should make overflow: visible set while animation is happening instead of letting jQuery set it to hidden.

[Rick Waldron]

Are you trying to set the "overflow" property _after_ the animation is complete? If so, then you'll need to use the animate complete callback.

​http://jsfiddle.net/rwaldron/hFbpF/2/

[tom@…]

Replying to rwaldron:

Are you trying to set the "overflow" property _after_ the animation is complete? If so, then you'll need to use the animate complete callback.

​http://jsfiddle.net/rwaldron/hFbpF/2/

I am trying to set the overflow to visible instead of it automatically changing to hidden when it performs the animation.

I found a solution, which is to make a class:

.overflowForce {
     overflow: visible !important;
}

and to call it like such:

$('.block').addClass('overflowForce').animate({width: 150}, {
    complete: function() {
        $(this).removeClass('overflowForce');
    }
});

​http://jsfiddle.net/hFbpF/3/

[mikesherov]

lots of animations need overflow: hidden to display properly. This is a feature, not a bug. It sounds like you have found a workaround yourself that you like. If you need more help, please use the forum or stackoverflow.com