Question

我编写了以下代码来更改鼠标悬停时的图像源。它改变了图像src，但效果是如此不稳定。 OnMouseOver它突然改变了图像。

请告诉我如何减慢动画效果。

    <script>

    $(document).ready(function(){


        $("#image").hover(function(){           
            $(this).attr("src","images/pic2.png")
                },  function(){                 
                    $(this).attr("src","images/pic1.jpg")   
            });
        });


    </script>

</head>

<body>  
    <img id="image" src="images/pic1.jpg">  
</body>

修改

http://jsfiddle.net/MKuvn/

Answer 1

您可以在jQuery中使用fadeOut和fadeIn效果：

 $(document).ready(function(){

     $("#image").hover(function(){           
         $(this).fadeOut(1000,function(){
           $(this).attr("src","images/pic2.png");
           $(this).fadeIn(1000);
         });
       },  function(){                 
           $(this).fadeOut(1000, function(){
             $(this).attr("src","images/pic2.png");
             $(this).fadeIn(1000);
           });                  
       });
 });

<强> Demo

Fade IN / Out API

如何在更改图像属性时使用jquery获得平滑效果？

1 个答案: