Question

I have a css menu the has a JQUERY opacity fade effect on the rollover of certain images. My problem is that the images start out at 100% opacity when I need them to start at an opacity of 0.8.

Here is my current code:

$(document).ready(function(){
    $(".nav_btn").hover(function() {
        $(this).stop().animate({opacity: "1"}, 'fast');
},
function() {
    $(this).stop().animate({opacity: "0.8"}, 'fast');
  });
});

How do I modify this code to have it start out with an opacity of 0.8 on DOM load?

Thanks,
drummer392

Answer 1

You can use CSS:

.nav_btn {
    opacity : 0.8;
    filter  : alpha(opacity=80);
}

The filter is for IE8 and older.

If you really want to use JS it’s pretty easy:

$(document).ready(function(){
    $(".nav_btn").css('opacity', 0.8).hover(function() {
        $(this).stop().animate({opacity: "1"}, 'fast');
    },
    function() {
        $(this).stop().animate({opacity: "0.8"}, 'fast');
    });
});