jQuery slide li离开了

我正在制作一个幻灯片查看器，显示的ul中有5个lis。 如何使用j查询在li上向左滑动，这样左边的li就不再显示了，其中一个未显示？

Answer 1

2011年6月30日更新

当我真正对jquery不熟悉的时候，我回答了这个问题。 我已经学到了一些东西，并且在这个答案被推迟了一天之后，我给了这个答案一看。 我最初不满意下一个元素如何迅速进入，并且或多或少地打破了这个障碍。 （ 见这里 ）。 我觉得处理这个问题的合适方法是使用在第一个切换后调用的回调。

更新了jquery

$('li:gt(4)').css('display', 'none'); $("button").click(function() { $('li:first').insertAfter('li:last').toggle('clip', 100, function() { //called after the first .toggle() is finished $('li:eq(4)').toggle('scale', 100); }); }); 

查看更新的实时示例 。

.toggle（）

 .toggle( [duration,] [easing,] [callback] ) durationA string or number determining how long the animation will run. easingA string indicating which easing function to use for the transition. callbackA function to call once the animation is complete. 

---

旧

JQUERY

  $('li:gt(4)').css('display', 'none'); $("button").click(function() { $('li:first').fadeOut('fast').insertAfter('li:last') $('li:eq(4)').fadeIn(); }); 

HTML

 
 
 Item-1 
 
 Item-2 
 
 Item-3 
 
 Item-4 
 
 Item-5 
 
 Item-6 
 
 Item-7 
 
 Item-8 
 
 Item-9 
 
 Item-10 
 
  Next >  

和小提琴http://jsfiddle.net/EZpMf/

这将不那么严格，使用更少的代码。 我也认为它非常易读。

这样做是选择任何大于4（基于零）的li并隐藏它。 接下来，当你点击按钮时，它可以简化第一个按钮并将其插入到最后，然后取出第4个并轻松将其放入。我想你可以自定义动画。 使用切换和jquery-ui提供的一些动画效果。 但这是一个快速的例子。

在尝试改进之后编辑我问自己的问题。 我正在粘贴答案+小提琴

 $('li:gt(4)').css('display', 'none'); $("button").click(function() { $('li:first').insertAfter('li:last').toggle('clip',100); $('li:eq(4)').toggle('scale', 100); }); 

http://jsfiddle.net/67Wu7/

Answer 2

HTML

 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
  next  

CSS

 li { float: left; display: none; } 

jQuery的

 $("li").filter(function(key) { return key < 5; }).css("display", "inline"); $("button").click(function() { var lis = $("li"); // place the first element at the end. var li = lis.first().detach().appendTo("ul"); // show first 5 $("li").filter(function(key) { return key < 5; }).css("display", "inline"); // hide rest $("li").filter(function(key) { return key >= 5; }).css("display", "none"); }); 

实例