jquery - 如何在鼠标悬停和鼠标移出时添加淡入淡出效果？

Question

如何在鼠标悬停和鼠标移出时添加淡入淡出效果？

<script>
jQuery(function() {
 jQuery(".logo img").mouseover(function() { 
var src = "<?php echo $this->baseurl ?>/templates/kalfany/images/logo-<?php echo $this->language; ?>-hover.png";
 jQuery(this).attr("src", src);
}).mouseout(function() {
 var src = "<?php echo $this->baseurl ?>/templates/kalfany/images/logo-<?php echo $this->language; ?>.png";
 jQuery(this).attr("src", src);
}); });
</script>

我从这里得到了我的问题的答案

http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

这就是我要找的所以，最好的答案是我的；）

Answer 1

使用这样的东西...

$('.logo img').hover(
  function(){
    $(this).fadeOut('slow');
  },
  function(){
    $(this).fadeIn('slow');
  }
);

但我在想它可能不起作用，因为如果它完全淡出，hoverOut 会自行调用。您可以尝试在图像上添加一个 div 并隐藏图像而不是 div。

Answer 2

你可以这样使用...

$(".logo img").mouseover(function() {
    $(this).fadeIn('fast');
}).mouseout(function () {
    $(this).fadeOut('fast');
});​

Answer 3

如果您不是在寻找某种交叉淡入淡出，您可以使用

 jQuery("img").mouseover(function() { 
     var src = "http://www.josephmccaffery.com/wp-content/uploads/2011/04/logo_google_x-150x150.png";
     jQuery(this).fadeOut(300,function(){
         jQuery(this).attr("src", src).fadeIn();
     })
}).mouseout(function() {
     var src = "http://techteen.net/wp-content/uploads/2012/08/Google-Logo-Square.png";
     jQuery(this).fadeOut(300,function(){
         jQuery(this).attr("src", src).fadeIn();
     })
});

​</p>

jsfddle

如果未加载图像，可能会出现故障。