Jquery動畫。顯示none none css不會改變

Question

在頁面第一次加載時，圖片必須顯示：無。但問題是，當我把顯示器設置爲none時，animate函數不起作用，我已經將.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。刪除你的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：

，並刪除風格