Question

Hey everyone. This seems easy enough, but for some reason I’m having a hard time piecing it together. I want to create an animated “fade in” effect, where a div fades from 0 opacity to 50% opacity, and stops.

As far as I understand:

var duration = 1000;
$('#mydiv').fadeIn(duration);

will fade the div to 100%, with no option of limiting this.

Is there an elegant way of setting the finishing opacity?

Answer 1

.fadeTo();

That’s it.

http://api.jquery.com/fadeTo/

---

You will notice issues with IE and alpha channels.

These are lovely for FF, chrome and the rest…

opacity:0;
-moz-opacity:0;

IE expects to see this:

filter:alpha(opacity=x).