javascript - How do you fade in *partially* in jQuery? - Stack Overflow

admin管理员组

文章数量:1289540

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?

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?

• javascript
• jquery
• css
• internet-explorer
• fadein

Share Improve this question Follow edited Jan 18, 2011 at 1:08 Zaven Nahapetyan asked Jan 17, 2011 at 20:35 Zaven NahapetyanZaven Nahapetyan 1,27911 gold badge1111 silver badges1515 bronze badges 2

• 2 I hate it when it requires a long explanation like that.... then all the answers are 1-liners – Ben Commented Jan 17, 2011 at 20:42
• The cruel irony is that the more you learn the better your questions get. If he played with the jQuery source code more he'd probably have a shorter question. If he knew about jsfiddle he'd probably have a working example for us of the issue, etc, etc... – Incognito Commented Jan 17, 2011 at 20:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

I think you use the fadeTo() method.

.fadeTo();

That's it.

http://api.jquery./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).

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

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.

本文标签： javascriptHow do you fade in *partially* in jQueryStack Overflow