列表项在导航时淡入

我有一组列表项，通过“下一步”和“上一步”按钮进行控制。代码一次显示五个列表项，如果还有更多的可以点击“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这就是为什么他们要等到动画完成属性。 –

列表项在导航时淡入

回答

相关问题