jquery翻转鼠标褪色图像

我有jquery脚本，当有人翻转图像上的鼠标时，替换图像。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>

来源

2013-08-23 Roi

使用'淡入（）'＆找到'淡出（）' – raam86

这将淡入淡出的元素，交换图像和褪色元素早在（动画不透明度将避免鼠标离开的问题被触发，当元素淡出）：

$(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-23 22:37:47 adeneo

不好。它淡出第一张图片而没有显示第二张... – Roi

上面的小提琴：http://jsfiddle.net/JNj7N/1/ – MackieeE

@Roi - 这就是为什么它说“交叉褪色你需要两个元素”，如何你是否期望用一个元素同时显示两个图像，只是将这个图像从源头中分出来？ – adeneo

adeneo的答案提供了fadeIn函数作为fadeOut函数的回调函数。如果你想让图像淡出然后让另一个淡入，这将工作得很好。

如果你想在同一时间发生衰落，你可能不得不使用一些css技巧来放置隐藏的图像在非隐藏的图像上，然后调用fadeIn和fadeOut。所有的jQuery动画都是异步执行的，所以它们将同时发生。

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

来源

2013-08-23 22:40:35 benashby

jquery翻转鼠标褪色图像

回答

相关问题