jQuery通過無序列表進行動畫處理

Question

我有一個無序列表，ul本身沒有設置高度，li的沒有設置高度。 我試圖僅顯示5 li，並使用向上/向下箭頭在它們之間循環。 我遇到的問題是使用“向上”按鈕。 對於此示例，我有6個項目，在“向上”的第六次單擊上，它不再隱藏這些項目，而只是將其添加到項目中，從而破壞了滑塊的作用。

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

試試這個..實際上的onclick up你想顯示第一李，而不是，ü需要顯示的第六人，所以增加了一條線，只顯示李娜的索引為< 5

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