0

我有 jquery 脚本，当有人用鼠标悬停在图像上时，它会替换图像。

我希望它随着褪色而改变。

我需要做什么？

谢谢！

<img src='images/dogySitter_s.png' alt='' id='first'  />



<script  type='text/javascript'>
$(document).ready(function(){
    $("#first").hover(
        function() {$(this).attr("src","images/dogySitter_c.png");},
        function() {$(this).attr("src","images/dogySitter_s.png");
    });
});
</script>
4

2 回答 2

0

这将使元素淡出，交换图像，然后将元素淡入（动画不透明度将避免元素淡出时触发 mouseleave 的问题）：

$(document).ready(function(){
    $("#first").on({
        mouseenter: function() { 
            $(this).animate({opacity: 0}, 400, function() { 
                $(this).attr('src', 'images/dogySitter_c.png')
                       .animate({opacity: 1}, 400);
            });
        },
        mouseleave: function() {
            $(this).animate({opacity: 0}, 400, function() { 
                $(this).attr('src', 'images/dogySitter_s.png')
                       .animate({opacity: 1}, 400);
            });
        }
    });
});

对于交叉淡入淡出，您需要两个元素

于 2013-08-23T22:37:47.860 回答
0

adeneo 的答案提供了 fadeIn 函数作为 fadeOut 函数的回调。如果您希望图像淡出然后让另一个图像淡入，这将非常有用。

如果您希望同时发生淡入淡出，您可能必须使用一些 css 技巧将隐藏图像放在非隐藏图像上，然后依次调用fadeIn和fadeOut。所有 jQuery 动画都是异步执行的，所以它们会同时发生。

更多信息可以在这里找到 fadeOut http://api.jquery.com/fadeOut/

于 2013-08-23T22:40:35.960 回答