Transitioning a page to no longer use the bulky YUI animation library, I came across an issue in Safari 3.1/Windows.

I've created a link that animates the height of a UL element, collapsing links after 5 and appending the link.

In Safari, when the animation completes, the overflow is set to visible, which causes layout issues when we have the height collapsed.

I fixed this by setting it back in the onComplete function:

$(container).animate({height: theHeight}, 1000, (function(){

$(container).css('overflow', 'hidden'); Safari bugfix, this should already be set

}));

However, if I click on a second link to start animating that container open before the first container has collapsed, this function does not appear to run, or at least, it is not run in the proper context (it is run on the new container, even before that animation is complete).

I tested this by alerting on the ID of the context element. If I click on one of the links and then another before the 1 second animation is complete, the animation complete function fires in the context of the second, still-mid-animation element.

I suppose this might be two separate issues then. One Safari-specific and the other generic to all browsers (or at least Firefox and Safari).

Test case at: http:runion.cc/files/safariJQbug.html showing both bugs.