How do you fade in *partially* in jQuery?

问题

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?

回答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).

回答2:

I think you use the fadeTo() method.

回答3:

use .fadeTo() with the second parameter set to 0.5.

回答4:

No need to add the different browser conditional - jQuery will handle opacity in IE and firefox just by using the standard opacity call:

$('#mydiv').animate(
    {
        opacity : 0.5
    }, 500
);

And yeah, use fadeTo like the others mentioned.

来源：https://stackoverflow.com/questions/4717617/how-do-you-fade-in-partially-in-jquery