导航时列表项淡入淡出

Question

我有一组列表项，我通过 "Next" 和 "Prev" 按钮控制它们。该代码一次显示五个列表项，如果有更多列表项，您可以单击 "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（或类似的东西）

我知道有一些轮播可以做到这一点，但我不需要那么笨重的东西，特别是因为该功能已经可以使用如此少量的代码。

我可以对我已经使用的东西进行简单的修改来完成这样的事情吗？

谢谢，
乔什

Answer 1

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

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

Answer 2

像这样:

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

    });
});

导航时列表项淡入淡出

List item fade when navigating

javascript

navigation

jquery

list

fadein