jQuery通過無序列表生成動畫

Question

我有一個無序列表，ul本身沒有設置高度，並且li沒有設置高度。我試圖只顯示5裏，並用上/下箭頭循環。我遇到的問題是「向上」按鈕。對於這個例子，我有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你想顯示第一禮，取而代之的是u需要顯示的第六人，所以已添加一行以顯示只有那些指數爲< 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(); 
});