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