Stop jQuery animation prematurely

Question

Hi, 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

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

Answer 2

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

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

Answer 3

You can also use the fadeTo function.

This is the synthax:

.fadeTo( duration, opacity, [ callback ] )