圖像淡入淡出

我有一個菜單（img.b和img.a）疊加的2圖像類，img.b默認情況下爲0以上，我需要使img.a淡出而另一個淡入..像我的代碼，img.a保持在淡入淡出的（2類有透明度，所以你可以看到他們一個在另一個）..嘗試了幾個解決方案，但我最終影響到所有鈕釦在一起。圖像淡入淡出

<script type='text/javascript'> 
$(document).ready(function(){ 
$("img.b").hover(
function() { 
$(this).stop().animate({"opacity": "1"}, "fast"); 
}, 
function() { 
$(this).stop().animate({"opacity": "0"}, "fast"); 
}); 
}); 
</script> 


img.a { 
    z-index: 1; 
    position:absolute; 
     } 

img.b { 
    position:absolute; 
    opacity: 0; 
    z-index:10; 
    }

來源

2013-03-19 mannygtr

將此窗體懸停在jQuery 1.9 + – 2013-03-19 22:01:18

中使用['.mouseenter（）']（http://api.jquery.com/mouseenter/）和['.mouseleave（）']（http： //api.jquery.com/mouseleave/） – Dom 2013-03-19 22:01:44

請問您可以編輯您的問題，因爲實際問題或問題對我而言並不明確 – 2013-03-19 22:02:35

這與this previous question相似。你所要做的就是交叉淡化。 This article解釋得很好。

您可能也有興趣crossfading with CSS。

真正的問題是，由於它是單線程，實際上很難在JavaScript中實現真正的淡入淡出。所有'淡入淡出'插件等都是通過淡出頂部元素或通過快速閃爍背景來僞造的。即在500毫秒內淡出一個圖像，顯示半毫秒的背景，然後立即淡入500毫秒以上的新圖像。

如果你有兩張具有透明度的圖像，如果不使用通過背景技術的人造交叉淡入淡出效果，將會非常困難。

使用canvas and requestAnimationFrame可能會得到真正的淡入淡出效果，但這比簡單的jQuery淡入/淡出調用要複雜得多。

來源

2013-03-19 23:04:49 Geoff

謝謝，我會嘗試以不同的方式解決問題 – mannygtr 2013-03-20 08:03:22

圖像淡入淡出

回答

相關問題