添加淡入淡出效果圖像燈箱JQuery

我有一個jQuery的燈箱，用戶點擊兩個鏈接的「下一個」和「上一個」瀏覽圖像。添加淡入淡出效果圖像燈箱JQuery

如何淡入新圖像？

這是我的新代碼如何替換舊圖片的代碼片段。

var image = $(item).find('a').attr('href'); 

$('#lightbox img#image').attr('src', image);

來源

2011-10-11 Cecil Theodore

這是我使用的，它工作得非常好，而且非常簡單。 http://jonraasch.com/blog/a-simple-jquery-slideshow。當然，你必須調整它來改變點擊而不是間隔。 – bricker

是的，這是一個很好的幻燈片，但我創建了自己的畫廊，只需要淡入淡出效果。可能是我認爲的最簡單的代碼部分。 –

看看他如何處理幻燈片中的褪色。它會爲你工作。他建立了獨立的div，然後操縱它們的不透明度和z-索引。 – bricker

2級中提出的解決方案：

孤子1

淡出（不透明度），變化的圖像，再次褪色英寸

$('#lightbox img#image').animate({ opacity: 0}, 500, function(){ 
    $('#lightbox img#image').attr('src', image); 
    $('#lightbox img#image').animate({ opacity: 1}, 500); 
});

孤子2

正如布里克提到的，你可以用一種方式http://jonraasch.com/blog/a-simple-jquery-slideshow做，但這樣做，我認爲你不能避免在同一時間有兩個圖像對象。我想這對你來說更適合你的幻燈片放映。但是，你可以同時淡入淡出。

來源

2011-10-11 10:47:08 lumbric

添加淡入淡出效果圖像燈箱JQuery

回答

相關問題