jQuery的幻灯片里留下 [英] jQuery slide li left

问题描述

林制作幻灯片观众有5利斯在UL，显示。如何使用Ĵ查询到左李滑动，左边的礼不再看到和没看到的一种是显示？

Im making a slide viewer there are 5 lis in the ul that show. how do i use j query to slide left on li so the li on the left is no longer seen and one of the ones not seen is shown?

推荐答案

我回答了这个问题，当我realitvely新 jQuery的。因为我已经学到了一些东西，而这个答案upvoted的晚上后，我给了这个答案一看。我是多么的下一个元素将很快进入最初不爽，或多或少打破块。 （看到这里）。我觉得适当的方式来处理这个问题是一个这是第一个触发之后调用回调。

updated 30 jun 2011

I answered this question when I was realitvely new to jquery. I have since learned a few things, and after this answer was upvoted the other night I gave this answer a look over. I was initially unhappy with how the next element would enter to quickly, and more or less break the block. (see here). I feel the appropriate way to handle this question was with a callback that is called after the first toggle.

$('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( [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/

这会减少僵化和使用更少的code。我也觉得这是非常具有可读性。

This will be less rigid and use much less code. I also think it is very readable.

这样做是选择大于4（从零开始）任何Li和隐藏它。接下来当你点击该按钮它简化了第一个出来，并在年底将其插入，并采取第四之一，并简化它。我想你可以自定义动画。使用切换和一些使用jQuery的UI提供的动画效果。但是这是一个简单的例子。

What this does is selects any li greater than 4 (zero based) and hides it. next when you click on the button it eases the first one out and inserts it at the end, and take the 4th one and eases it in. I suppose you could customize the animation. Using toggle and some of the animation effects supplied with jquery-ui. but this was a quick example.

修改
努力改善这之后，我问我自己的问题。我粘贴了答案+小提琴

EDIT after trying to improve this I asked my own question. I am pasting the answer+fiddle

$('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/

这篇关于jQuery的幻灯片里留下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！