Question

我正在制作幻灯片查看器，显示的ul中有5个lis。如何使用j查询在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

jQuery slide li离开了

2 个答案:

已于2011年6月30日更新

更新了jquery

.toggle()