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

我已经编写了以下代码来更改鼠标悬停时的图像源。它改变了图像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/

您可以在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);
           });                  
       });
 });

淡入/淡出API

相关内容

最新更新

热门标签：