Stop jQuery animation prematurely

Question

I'm trying to fadeIn and fadeOut a transparent png using JQuery. Of course, it looks slick in Firefox, but significantly less than acceptable in IE (7 and 8). It's a known bug with IE, and unfortunately there doesn't seem to be much of a workaround.

Basically what I'm doing is place a semi-transparent white rectangle over an image to make the image appear 'in the background'. I want to do this smoothly, and that's where fadeIn comes in. Because of the IE bug, however, I've been forced to fadeIn a completely opaque white rectangle over the image instead, making it unfortunately disappear. While this looks significantly better and is ALMOST what I'm looking for, it's still not acceptable. The user needs to be able to see SOME image on the page, albeit in the background.

So my question is this:

Is there a way to stop the fadeIn function (or any jquery animation, really) after animating for 75% of its expected animation time?

This would leave my image 75% mixed the white rectangle, and I wouldn't have to deal with IE's nasty transparent png bug.

Thanks!

Answer 1

You could use an opaque image and just animate it's opacity to 75%.

  $('#overlay').animate({
    opacity: 0.75
  }, 5000, function() {
    // Animation complete.
  });

Answer 2

Instead of fadeIn/fadeOut, use the animate function to animate the opacity property to your desired level.

Answer 3

You can also use the fadeTo function.

This is the synthax:

.fadeTo( duration, opacity, [ callback ] )

Answer 4

Not recommended for your situation, but here's the actual answer to your question as asked :-)

.stop( [ clearQueue ], [ jumpToEnd ] )

When .stop() is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with .slideUp() when .stop() is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.

http://api.jquery.com/stop/