jQuery的fadeTo IMG SRC懸停

所以現在我有這樣的：jQuery的fadeTo IMG SRC懸停

$('#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

來源

2014-01-20 Tyler

您可以使用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); 
    }); 
});

演示：Fiddle

來源

2014-01-20 09:16:18

這工作運行，但它在新的一個將因此有一段時間之前消失的原出在標誌消失的地方，這正是我試圖避免的地方。舉例說明我正在嘗試使用css： http://jsfiddle.net/Nu5kb/ 除了在兩張圖片中使用相同類型的效果 – Tyler

@Tyler消失的問題是否來臨只有第一次或每次都來？圖像是否被覆蓋 –

您也可以嘗試CSS的過渡，但是這可能不會對所有的瀏覽器

#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/

來源

2014-01-20 09:28:46 Tschitsch

jQuery的fadeTo IMG SRC懸停

回答

相關問題