jquery圖像淡入和淡出同時？

Question

我想使用jquery交換黑白圖像。有幾種方法可以做到這一點...

1. fadeOut當前圖像，一旦它完成後，淡入淡出新圖像。 （這很容易，我已經能夠複製它）
2. fadeout當前圖像，同時淡入新圖像...（我唯一能想到的解決方案是有兩個圖像標記，第一個淡出當前圖像，第二個在新的圖像褪色）

有沒有更好或不同的解決方案相同....？

Answer 1

這取決於您的要求。如果您的圖像大小不同（高寬比），是的，唯一的解決方案是將兩個圖像疊加在一起並同時淡入/淡出。

如果您的圖片尺寸相同，我以前使用過更好的解決方案。你把兩個嵌套<div> S：

<div><div></div></div> 

從CSS設置它們的寬度/高度將圖像的寬度/高度，也從JavaScript如下：

1. 設置內部div的背景圖片到第一個圖像
2. 將外部div的背景圖像設置爲第二個圖像
3. 淡出內部div（這將在兩個圖像之間創建一個非常好的平滑過渡效果）;
4. 設置內div的背景圖像提供給第三圖像
5. 淡入內的div
6. 設置外div的背景圖像提供給第四圖像
7. 淡出內的div
8. 等...

這樣，你只會消失一個元素（所以它很快），但你會得到一個非常好的效果。確保預先加載圖像以獲得無縫的體驗。

Answer 2

將圖像放在同一位置，並將css的位置屬性設置爲絕對。然後嘗試

$('#image1').fadeOut('slow'); 
$('#image2').fadeIn('slow'); 

Answer 3

我很懶，只是使用jQuery Cycle Lite。

$("#lazy").cycle(); 

Answer 4

使用Jquery.Cycle

Jquery.cycle可以設立這樣

$('.slides').cycle({ 
    fx:  'scrollHorz', 
    speed: 400, 
    timeout: 0});