导航时列表项淡出

debugcn 发表于 Dev

乔什·罗杰斯（Josh Rodgers）

我有一组列表项，这些列表项是通过“下一步”和“上一步”按钮控制的。该代码一次显示五个列表项，如果还有更多，则可以单击“下一步”，您将看到另外五个-如果单击“上一个”，您将看到前五个...非常简单的操作，它可以工作。您可以在以下网址看到一个实时示例：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（或类似的东西））

我知道那里有一些轮播可以做到这一点，但是我不需要那么大的东西，特别是因为该功能已经可以用很少的代码工作了。

我可以对已经用于完成类似任务的内容进行简单的修改吗？

谢谢，
乔希

查理·伯特（Charly Berthet）

像那样：

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

    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。