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

对于滑动工作，必须隐藏图像，所以尝试

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

演示：Fiddle

Answer 2

您可以先将css设置为隐藏它：

.product_image {
    display: none;
}

或jQuery：

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

因为slideDown()仅适用于隐藏元素。

<强> Fiddle Demo

文档准备好后，jquery做简单的动画

2 个答案: