Question

现在我有了这个：

$('#logo').hover(
function(){
  $(this).attr('src','img/logo-hover.jpg');
},
function(){
  $(this).attr('src','img/logo-grey.jpg');
}

哪个有效，但我想为它添加一个淡入淡出效果。我已经尝试了几次fadeTo，fadeIn，fadeOut的迭代，并查看了几个翻转的例子（其中大多数似乎过于复杂，我想在这里做）但我似乎无法让这个工作。我所看到的所有例子也会在引入我不需要做的新图像之前淡出原始图像。

添加此效果的最简洁方法是什么？

使用CSS举例：http://jsfiddle.net/Nu5kb/ 我想要这个效果，除了使用2个图像

-Thanks

Answer 1

您可以使用fadeTo() / fadeIn()＆amp; fadeOut()要做到这一点

$('#logo').hover(function () {
    $(this).stop(true, true).fadeTo('normal', .1, function () {
        $(this).attr('src', '//placehold.it/64/ff0000').fadeTo('normal', 1);
    });
}, function () {
    $(this).stop(true, true).fadeTo('normal', .1, function () {
        $(this).attr('src', '//placehold.it/64/0000ff').fadeTo('normal', 1);
    });
});

演示：Fiddle

Answer 2

您也可以尝试使用css-transitions，但这可能无法在每个浏览器上运行

#logo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 128px;
    height: 128px;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;    
}

#logo1 {
    opacity: 1;
}

#logo2 {
    opacity: 0;
}

#logo:hover #logo1 {
    opacity: 0;
}

#logo:hover #logo2 {
    opacity: 1;
}

http://jsfiddle.net/TYVTb/5/

Jquery在悬停时淡出IMG SRC

2 个答案: