opacity of element

问题

I'm trying to set opacity of element by jQuery.

$('[class*="OtherFeatur"]').load(function(){
                    $(this).fadeTo(500, 0.5);
                });

is not working but when I do

                $('[class*="OtherFeatur"]').fadeTo(0,0.5);

it will be affected. where is problem of first code? and which one is better ,set opacity by jQuery or CSS? how can I do it by css ,that all browser can show it?

回答1:

.load() - Load data from the server and place the returned HTML into the matched element.

So this function works for loading data from the another resource to the element you selected.

probably you need page load event:

$(document).ready(function() {
   $('[class*="OtherFeatur"]').fadeTo(0,0.5);
});

or if you loads some data, specify the source first in the .load() method.

$('[class*="OtherFeatur"]').load('mysource.html', function(){
                $(this).fadeTo(500, 0.5);
            });

in this case function will be invoked after loading the content.

回答2:

If you want to just set the opacity of element then use css method.

 $('[class*="OtherFeatur"]').css("opacity", 0.5);

回答3:

An animation need to be longer then 0ms

you can just use:

$('[class*="OtherFeatur"]').css({ opacity: 0.5 });

if Im not mistaking jquery has extended the opacity rule on the CSS so it applies on all browsers.

回答4:

what you are looking for is

$(window).load(function() {
    $('[class*="OtherFeatur"]').fadeTo(0,0.5);
});

来源：https://stackoverflow.com/questions/7349738/opacity-of-element