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();
     })
});

jsfddle

如果未加载图像，可能会出现毛刺。

如何在mouseover和mouse out上添加淡出淡出效果？

3 个答案: