Issue with jQuery UI animation overflow

I've got an element #content and a child element #footer positioned outside #content. When animating #content, #footer is not visible during the animation. I've understood from another question that this was because the animation set overflow to hidden during the animation. I've then set the overflow of the wrapper created by jQuery UI (.ui-effects-wrapp开发者_Python百科er) to overflow: visible !important;, but then the animated element is also visible outside #content during the animation.

So: I need overflow: visible to see my #footer element, but jQuery UI needs overflow: hidden to hide the animated part outside #content.

Anybody can help?

Thanks

#content {
    position: absolute;
    width: 45em;
    height: 26em;
    top: 8em;
    left: 16em;
}

#footer {
    position: absolute;
    width: 200em;  //larger than #content, so have to play with overflow
    height: 2.375em;
    bottom: 0;
    left: -50em;
}

.ui-effects-wrapper {
    overflow: visible !important ;
}

During the animation you can change the visibility. Example:

$('#link').click(function(){
    // Do the animation

    $(this).css('overflow','visible');
});

Would that help?