Jquery animate. Display none css is not changing

Question

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

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.