列表項在導航時淡入

我有一組列表項，通過「下一步」和「上一步」按鈕進行控制。代碼一次顯示五個列表項，如果還有更多的可以點擊「Next」，你會看到另外五個 - 如果你點擊「Prev」，你會看到前面的五個...非常簡單的操作，它的工作原理。您可以在http://joshrodg.com/hallmark/events/處看到一個實例。列表項在導航時淡入

我使用的JavaScript是：

$(document).ready(function() { 
    var $li = $('.eo-events li'); 
    $li.hide().filter(':lt(5)').show() 
    var x = 5; 

$('#next, #prev').click(function() { 
    var m = this.id === 'prev' ? 'first' : 'last'; 
    var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")"); 
    if ($m.length == 0) return; 
     $li.hide(); 
     $m.show(); 
    }); 
});

http://jsfiddle.net/479Fr/

我希望做的是有項目淡入，而不是僅僅出現......有點像：https://codepo8.github.io/simple-carousel/carousel-pointer-events.html（或類似的東西）

我知道有一些傳送帶可以做到這一點，但我不需要笨重的東西，特別是因爲功能已經適用於這麼少量的代碼。

是否有一個簡單的修改，我可以做我已經用來完成這樣的事情？

感謝，
喬希

來源

2016-02-12 Josh Rodgers

就像是：

$(document).ready(function() { 
    var $li = $('#myList li'); 
    $li.hide().filter(':lt(5)').show() 
    var x = 5; 

    $('#next, #prev').click(function() { 
     var m = this.id === 'prev' ? 'first' : 'last'; 
     var $m = $li.filter(':visible')[m]()[this.id + 'All'](":lt(" + x + ")"); 
     if ($m.length == 0) return; 
     var time = 250; 
     $li.fadeOut(time); 
     setTimeout(function(){ 
      $m.fadeIn(time); 
     }, time); 

    }); 
});

來源

2016-02-12 14:06:43

這是一個很好的解決方案，我知道它很簡單，但我嘗試過的所有東西（在此解決方案之前）將效果應用於每個單獨的列表項目，而不是每個五個集合......謝謝！ –

這將工作，同意聰明的一個。但在角落的情況下，它可能會重疊，因爲動畫時間不能保證。更好地增加例如「時間」 '50'，以確保動畫將結束到那個時候。 –

不確定你是不是添加50（如此300）或將250改爲50？ –

使用JQuery的.fadein /出已經衰落動畫

http://api.jquery.com/fadein/

來源

2016-02-12 13:55:22

這確實應該是一個評論，不回答 –

，這將無法正常工作。顯示/隱藏單獨的元素。它會閃爍。 –

@AlexIvasyuv這就是爲什麼他們要等到動畫完成屬性。 –

列表項在導航時淡入

回答

相關問題