정렬되지 않은 목록을 통해 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

이 .. 실제로 온 클릭 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(); 
});