How can I run a function anytime anything is animated with jQuery?

Question

Hi -

I have some jQuery animations in my code to slide divs up and down in response to some mouse clicks and other logic. This is all working just peachy, however in IE 6 some of the smaller icon images on the page don't slide along with the rest of the div for some strange reason. They kind of stay put then flicker into the new position and I've chalked this up to an IE6 'feature'.

Considering that I have to support IE6, I wanted to just hide the icons anytime an animation started, and show them again when the queue was empty.

I couldn't find a reference to any kind of events or hooks into the queue itself and I'd rather not add the hide code, then the show code to every animation as a callback.

Thanks if you can help-

b

Answer 1

Does it do the same in IE7? Is the div or icon relative positioned?

Answer 2

You can do this with the livequery plugin like so:

$(':animated').livequery(function() {
  // firing code here
}, function() {
  // anything you want to run when all animation stops
});

This type of functionality is the only reason that the livequery plugin is still useful actually, since otherwise its functionality has been replaced by live() and delegate()

And since this only happens in IE6, it would be silly to hide them in all browsers, so in the firing function you can add a class with an IE6 hack like .hide4IE6 { _display:none; } to let them remain shown in other browsers.

Answer 3

Probable cause for IE6 goofiness: hasLayout. http://www.satzansatz.de/cssd/onhavinglayout.html

Try adding zoom: 1 to the css of the images.