Jquery animate. Display none css is not changing.

Question

Hello to all,
I am trying to do is, in the first load of the page the image have to display:none. But the problem is, when I put display none, the animate function is not working and I already put a .css({'display':'block'}) still not working.

Here is my code

<script type="text/javascript">
    $(document).ready(function() {
        $("img.fade").hover(function() {
            $(this).stop().animate({ "opacity": "1" }, 300);
            $(this).css({ 'display': 'block' });
        }, function() {
            $(this).stop().animate({ "opacity": "0" }, 300);
        });
    });
</script>
<style type="text/css">
    img.fade { display:none }
</style>
<img src="image.jpg" class="fade" />

If I remove the display:none style, it is workin but when the first load of page, image is showing. I need to hide it in the first load the when hover it will show.

Thanks for reply

Answer 1

$(this).css({'display':'block'}); == $(this).show();
$(this).stop().animate({"opacity": "0"}, 300); == $(this).fadeOut(300);

etc

Change

$("img.fade").hover(

to

$("img.fade").hide().hover(

/E:

And remove style

Answer 2

If something's hidden you can't hover over it, since it occupies no space in the page. Instead set it's opacity to 0 initially. Remove your CSS and you can do this:

$(document).ready(function() {
    $("img.fade").hover(function() {
        $(this).stop().animate({ opacity: 1 }, 300);
    }, function() {
        $(this).stop().animate({ opacity: 0 }, 300);
    }).css({ opacity: 0 });
});

You can test it out here. Or, remove .css({ opacity: 0 }); and change your CSS to this:

img.fade { opacity: 0; filter: alpha(opacity=0); }

You can test that version here.