2

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 working but when the page first loads, image is showing. I need to hide it in the first load then when hovering it will show.

whostolemyhat
  • 3,107
  • 4
  • 34
  • 50
Jorge
  • 5,610
  • 18
  • 47
  • 67

2 Answers2

7

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.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
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

Misiur
  • 5,019
  • 8
  • 38
  • 54