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

【问题标题】：How to get Smooth Effect using jquery when changing attribute of an image?更改图像属性时如何使用jquery获得平滑效果？
【发布时间】：2014-07-14 05:07:01
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案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

【讨论】：

感谢您的回复...我已经实现了您的代码，它只是平滑地隐藏和显示第一张图片，但没有打开另一张图片。
控制台有错误吗？你关闭了你的文档。准备好了吗？你能分享一个jsfiddle吗？
我遇到了问题，实际上我必须在更改图像后淡出然后淡入。请查看我更新的答案和演示链接。
太棒了！非常感谢:) ..我可以使用jquery添加过渡吗？例如：我希望另一张图像慢慢重叠..
您可以使用api.jquery.com/animate 为图像制作动画……探索这个api，您将获得很多选择。很高兴为您提供帮助:)