JQuery оживить. Дисплей отсутствует css не меняется

Question

При первой загрузке страницы изображение должно быть дисплей: нет. Но проблема в том, что когда я помещаю display none, функция анимации не работает, и я уже положил .css ({'display': 'block'}) все еще не работает.

Вот мой код

<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" /> 

Если удалить дисплей: нет стиль, он работает, но при первой загрузке страницы, изображение показывает. Мне нужно скрыть его при первом загрузке, тогда, когда он будет вибрировать, он покажет.

Answer 1

Если что-то скрыто, вы не можете нависнуть над ним, так как он не занимает места на странице. Вместо этого сначала установите opacity в 0. Удалите CSS, и вы можете сделать это:

$(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. Или удалить .css({ opacity: 0 }); и изменить CSS к этому:

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

You can test that version here.

Answer 2

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

и т.д.

Изменить

$("img.fade").hover(

в

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

/E:

И удалить стиль