Javascript 导航时列表项淡入淡出

我有一组通过“下一步”和“上一步”按钮控制的列表项。代码一次显示五个列表项，如果还有更多，你可以单击“下一步”，你会看到另外五个-如果你单击“上一步”，你会看到前五个…非常简单的操作，它可以工作。您可以在以下位置看到一个实时示例：

我使用的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();
    });
});

我想做的是让物品淡入淡出，而不是仅仅出现……有点像：（或类似的东西）

我知道有一些旋转木马可以做到这一点，但我不需要那么庞大的东西，特别是因为它的功能已经可以与如此少量的代码一起工作

有没有一个简单的修改，我可以做什么，我已经用完成这样的事情

谢谢，

---

Josh

使用JQuery.fadein/out来制作淡入淡出的动画

像这样：

$(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);

    });
});

---

这应该是一个评论，而不是一个不起作用的回答。没有显示/隐藏单独的元素。它将闪烁。@Alexivasysuv这就是为什么他们要等到动画完成属性。这是一个很好的解决方案，我知道它很简单，但我尝试过的每一件事（在此解决方案之前）都将效果应用于每个单独的列表项，而不是每一组五个…谢谢！聪明人同意这一点。但在角落的情况下，它可能会因重叠而出现故障，因为动画时间无法保证。最好增加

时间

，例如

50

，以确保动画将在该时间结束。不确定您的意思是不增加50（即300）或将250更改为50？