使用列表項之間的類循環來衰退動畫

Question

我有一些代碼，我碰到的是我正在尋找以有效方式在列表項之間循環的代碼。我的問題是，我需要他們在'下一個'李可以fadeIn（）之前fadeOut（）'活躍'鋰。

我現在已經明顯地過渡了，我正在尋找一些更「性感」的東西，這就是爲什麼我希望它在過渡之間淡化。

我試圖戰略性地放置設置超時功能，但最終與含有變化的大小通過轉換（顯然是因爲我切換不正確的時間）。

這裏是我的代碼，我有過渡：

$(function() { 

    $(".header-featured-blocks").css("padding-top", "0px"); 

    var $lis = $('.header-featured-blocks li'); 
    $cur = $lis.first().addClass('active'); 
    $next = $cur.next().addClass('next'); 

    setInterval(function() { 
     $cur.removeClass('active'); 
     $cur = $next.removeClass('next').addClass('active'); 

     $next = $cur.next(); 
     if (!$next.length) { 
      $next = $lis.first(); 
     } 
     $next.addClass('next'); 
    }, 5000); 
}); 

這裏是我試圖獲得平滑的過渡失敗的嘗試。希望這會幫助別人試圖理解我想要達到的目標。

我的思考過程是：淡出當前的「活動」，等到淡出，然後從元素中刪除「活動」類。當發生這種情況時，請將超時設置爲500毫秒，而前面提到的操作正在進行，因此直到先前的「活動」已從「活動」類中移除後，「下一個」元素纔會變爲「活動」。

就像我之前所說的，我的時間是關閉的。而且我知道這一點，因爲如果我正確地做到了這一點，轉換的li元素不會在它們包含的div中反彈。

$(function() { 

    var $lis = $('.header-featured-blocks li'), 
    $cur = $lis.first().addClass('active'), 
    $next = $cur.next().addClass('next'); 

    setInterval(function() { 

     $cur.fadeOut(500).delay(500).removeClass('active'); 
     setTimeout(function(){ 
      $cur = $next.removeClass('next').fadeIn(500).addClass('active'); 
     }, 500); 

     $next = $cur.next(); 
     if (!$next.length) { 
      $next = $lis.first(); 
     } 
     $next.addClass('next'); 
    }, 5000); 
}); 

Answer 1

因此，根據我的理解，我對jQuery代碼片段進行了一些更改。我已經刪除了延遲並讓列表項目交叉淡入淡出。所以，當可見的項目淡出時，下一個淡入。爲了這個工作，我需要做一些樣式更改。我必須將列表項目的位置絕對化，以便交叉淡入處於同一個位置。我還隱藏了所有列表項，然後淡入第一項。

這裏是我的建議：

CSS：

.header-featured-blocks ul{ 
    position: relative; 
} 
.header-featured-blocks li { 
    position: absolute; 
    display: none; 
} 

的jQuery：

$(function() { 
    var $lis = $('.header-featured-blocks li'), 
    $cur = $lis.first().addClass('active'), 
    $next = $cur.next().addClass('next'); 
    $cur.fadeIn(500); 
    setInterval(function() { 
     $cur.fadeOut(500).removeClass('active'); 
     $cur = $next.removeClass('next').fadeIn(500).addClass('active'); 
     $next = $cur.next(); 
     if (!$next.length) { 
      $next = $lis.first(); 
     } 
     $next.addClass('next'); 
    }, 5000); 
}); 

我的樣本HTML：

<div id="container" class="header-featured-blocks"> 
     <ul> 
      <li>text 1</li> 
      <li>text 2</li> 
      <li>text 3</li> 
      <li>text 4</li> 
      <li>text 5</li> 
     </ul> 
    </div> 

我覺得這比等待一個動畫停下來開始下一個更有點「性感」。褪色很不錯。

而只是爲了使它更加性感，我們可以加少許滑吧：

$(function() { 
    var $lis = $('.header-featured-blocks li'), 
    $cur = $lis.first().addClass('active'), 
    $next = $cur.next().addClass('next'); 
    $cur.fadeIn(500); 
    setInterval(function() { 
     $cur.fadeOut({duration: 500,queue: false}).animate({marginLeft:10}).removeClass('active'); 
     $cur = $next.removeClass('next').css({marginLeft:-10}).fadeIn({duration: 500,queue: false}).animate({marginLeft:0}).addClass('active'); 
     $next = $cur.next(); 
     if (!$next.length) { 
      $next = $lis.first(); 
     } 
     $next.addClass('next'); 
    }, 5000); 
}); 

左我知道如果你需要演示？

編輯：

好吧，我反正做一個演示： https://jsfiddle.net/qx3ftL80/