jQuery 向左滑动

Question

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

Answer 1

2011 年 6 月 30 日更新

当我对jquery 很陌生时，我回答了这个问题。从那以后我学到了一些东西，在前几天晚上这个答案被投票后，我看了看这个答案。我最初对下一个元素如何快速进入并或多或少地打破障碍感到不满意。 (see here)。我觉得处理这个问题的适当方法是在第一次切换后调用回调。

更新的 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);
        });
});

查看更新后的live example。

.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

<ul>
    <li class="slider"> Item-1 </li>
    <li class="slider"> Item-2 </li>
    <li class="slider"> Item-3 </li>
    <li class="slider"> Item-4 </li>
    <li class="slider"> Item-5 </li>
    <li class="slider"> Item-6 </li>
    <li class="slider"> Item-7 </li>
    <li class="slider"> Item-8 </li>
    <li class="slider"> Item-9 </li>
    <li class="slider"> Item-10 </li>
</ul>


<button> Next > </button>

还有一把小提琴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

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<br/>
<button> next </button>

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");

});

Live Example