使fadeIn和fadeOut效果在jquery中順利工作

Question

我有一個頁面，其中我的圖像將淡入並出現淡入淡出效果。.當它立即發生時，fadein選項似乎是一個問題...請找到我的jsfiddle。

請幫忙

Answer 1

有兩件事，第一是fadeIn()僅在隱藏的元素上運行，因此您首先需要隱藏圖像，第二，需要在對下一幅圖像進行動畫處理之前等待fadeOut()動畫完成。 這段代碼適合您，我刪除了時間間隔和計數變量：

var $slideshowImgs = $('.slideshow img').hide();
(function fadeSlideshow ($img){
    var $next = $img.next();
    if(!$next.length)
        $next = $slideshowImgs.first();
    $img.delay(2000).fadeOut(function(){
        $next.fadeIn();
        fadeSlideshow($next);
    });
})($slideshowImgs.first().show());

演示小提琴

Answer 2

檢查此js小提琴http://jsfiddle.net/TXrDk/2/

采用

transition:.5s ease-in-out;