Question

我有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>

Answer 1

这会淡化元素，交换图像，然后淡化元素（动画不透明度可以避免在元素淡出时触发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);
            });
        }
    });
});

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

Answer 2

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

如果你想要同时发生淡入淡出，你可能不得不使用一些css技巧将隐藏图像放在非隐藏图像上，然后将fadeIn和fadeOut一个接一个地调用。所有jQuery动画都是异步执行的，因此它们会同时发生。

更多信息可以在fadeOut http://api.jquery.com/fadeOut/

找到

jquery rollover鼠标淡入淡出图像

2 个答案: