jquery文檔準備好後做簡單動畫

Question

我是jQuery初學者，請耐心等待。

我試圖slideDown頁面加載後的一系列圖像（document.ready()）。

這是我的JS代碼：

<script> 
    $(document).ready(function(){ 
     $(".product_image").slideDown("200"); 

     $(".product_image").hover(function(){ 
      $(this).fadeOut(200); 
      $(this).fadeIn(600); 
      $(this).css("background","black"); 
      $(this).slideDown("200"); 
      //$(this).hide(); 
     }) 
    }); 
</script> 

這是我的HTML：

<img src="Images/products/3.jpg" class="product_image"/> 

懸停功能可以正常使用，但slideDown無可奈何。它應該在$(document).ready()函數後面生成動畫。

感謝您的幫助

Answer 1

您可以設置CSS先隱藏：

.product_image { 
    display: none; 
} 

或jQuery：

$(".product_image").hide(); 

既然slideDown()只適用於隱藏的元素。

Fiddle Demo

Answer 2

對了slideDown工作圖像必須被隱藏起來，試圖

<img src="Images/products/3.jpg" class="product_image" style="display: none"/> 

演示：Fiddle