opacity of element

Question

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?

Answer 1

what you are looking for is

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

Answer 2

.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.

Answer 3

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

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

Answer 4

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.