jQuery слайд ли слева

Question

Я делаю просмотр слайдов, в улье 5 шоу, которые показывают. как я могу использовать j запрос, чтобы скользить влево по li, чтобы li слева больше не было видно, а один из невидимых показывался?

Answer 1

обновлено 30 июня 2011

Я ответил на этот вопрос, когда впервые познакомился с 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

<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/

Это будет менее жестким и использует гораздо меньше кода.Я также думаю, что это очень читабельно.

Для этого выбирается любой li больше 4 (на основе нуля) и он скрывается.затем, когда вы нажимаете на кнопку, она освобождает первую и вставляет ее в конце, берет четвертую и облегчает ее. Я полагаю, вы можете настроить анимацию.Использование переключателя и некоторых анимационных эффектов, поставляемых с jquery-ui.но это был быстрый пример.

EDIT после попытки улучшить это я задал свой вопрос.Я вставляю ответ + скрипка

$('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");

});

Живой пример