javascript - jQuery 通过无序列表制作动画

Question

我有一个无序列表，ul本身没有设置高度，li也没有设置高度。我试图只显示 5 里并用向上/向下箭头循环浏览它们。我遇到的问题是“向上”按钮。在此示例中，我有 6 个项目，第六次单击“向上”时，它不再隐藏这些项目，而是简单地添加到它们中，从而违背了 slider 的目的。

HTML

<div id="container">
            <a href="#" id="up">Up</a>
            <a href="#" id="down">Down</a>
          <ul>
            <li><span>Gun 1</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 2</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 3</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 4</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 5</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
            <li><span>Gun 6</span>Lorem ipsum dolor sit amet,consectetuer adipiscin consectetuer adipi<a href="">Learn More</a></li>
          </ul>
        </div>

JS

$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
    $('#container ul').append(first.show(500));
    $('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
    $('#container ul').prepend(last.show(500));
    $('#container > ul > li:gt(4)').hide();
});
e.preventDefault();
});

Answer 1

试试这个..实际上是up的onclick您试图显示第一个 li，而不是需要显示第六个 li，因此添加了一行以仅显示索引为 < 5 的那些 li。

$('#container > ul > li:gt(4)').hide();
$('#up').click(function(e){
    var first = $('#container ul li:first');
    first.hide('fast',function(){
       $('#container ul').append(first);  //don't show the first one, just append it
       $('#container ul li:lt(5)').show(500); // add this line
       $('#container > ul > li:gt(4)').hide();
    });
    e.preventDefault();
});
$('#down').click(function(e){
    var last = $('#container ul li:last');
    last.hide('fast',function(){
       $('#container ul').prepend(last.show(500));
       $('#container > ul > li:gt(4)').hide();
    });
   e.preventDefault();
});