jQuery FadeTo IMG SRC懸停

Question

所以現在我有這個：

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

哪個可行，但我想為其添加淡入淡出效果。 我已經嘗試了幾次衰落到淡出，漸入淡出，漸出淡出，並查看了幾個翻轉示例（對於我想在此處進行的操作，大多數看起來過於復雜），但似乎無法正常工作。 我看到的所有示例在引入不需要的新圖像之前，也會淡出原始圖像。

添加此效果的最干凈方法是什么？

舉一個使用CSS的例子： http : //jsfiddle.net/Nu5kb/我想要這種效果，除了使用2張圖片

-謝謝

Answer 1

您可以使用fadeTo（） / fadeIn（）和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);
    });
});

演示： 小提琴

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/