jquery - 将文本滑入和滑出

Question

我在文本滑块中遇到问题：

HTML：

<div id="textSlider">
    <ul>
         <li class="active">Doors | Windows | Showers</li>
         <li>Superb Fenestration | Superior Service</li>
    </ul>
</div>
<div class="clear"></div>

JS：

$('#textSlider ul li').each(function(){
    setTimeout(function(){
        $('.active').animate({'left': '0px'},500).delay(500).animate({'left': '-300px'},500);
        $(this).removeClass('active');
    }, 2000);

});

CSS：

#textSlider{
    position: relative;
    left: 0;
}
ul{
    list-style: none;
}
ul li{
    position: relative;
    left: -300px;
}
.clear{
    clear: both;
}

小提琴

我需要的：

我希望第一行滑入，然后滑出。在第一行之后，第二行应该做同样的事情。

然后函数应该重复整个过程

我怎么做？

Answer 1

您可以将 JavaScript 更改为：

setInterval(function(){
    $('.active').animate({'left': '0px'},500)
      .delay(500)
      .animate({'left': '0px'},500)
      .animate({'left':'-300px'},500)
      .removeClass('active')
      .siblings('li')
      .addClass('active');
}, 2000);

JSFiddle 演示

这将每 2 秒无限循环...

请记住，它只会迭代 2 个元素（如您的示例所示），如果您需要它来迭代n多个元素，您可以尝试这样做：

setInterval(function(){
    var $current = $('.active').animate({'left': '0px'},500)
        .delay(500)
        .animate({'left': '0px'},500)
        .animate({'left':'-300px'},500)
        .removeClass('active');

    if($current.next('li').length > 0) {
        $current.next('li').addClass('active');
    } else {
        $current.siblings('li:eq(0)').addClass('active');
    }
}, 2000);

$current基本上在变量上缓存当前活动元素，使用if来检查它之后是否有另一个<li>，如果没有，回到第一个<li>添加类active......

JSFiddle 演示 2

最后，如果您希望第一个循环与其他循环不同，您可以执行以下操作：

setTimeout(function(){
    loopList();
    setInterval(loopList,4000);
}, 1);

function loopList(){
    var $current = $('.active').animate({'left': '0px'},500)
    .delay(500).animate({'left': '0px'},500)
    .animate({'left':'-300px'},500)
    .removeClass('active');

    if($current.next('li').length > 0) {
        $current.next('li').addClass('active');
    } else {
        $current.siblings('li:eq(0)').addClass('active');
    }
}

在这种情况下，您将立即从第一次调用第一次迭代setTimeout（这就是本例中 0 的原因），然后调用setIntervalwhich 将每 4 秒循环一次。

JSFiddle 演示 3

Answer 2

小提琴

我将您的逻辑移到了一个单独的函数中。animate() 方法接受一个回调，该回调将更改“活动”li，然后再次调用自身。这给了你无限循环。

    function slide() {
    var activeElement = $('li.active');
    $('.active').animate({
        'left': '0px'
    }, 500).delay(500).animate({
        'left': '-300px'
    }, 500, function() {
        var nextActiveElement = activeElement.next('li');
        activeElement.removeClass('active');
        if (nextActiveElement.length < 1) {
            nextActiveElement = $('li').first();
        }
        nextActiveElement.addClass('active');
        slide();
    });
}

slide();

Answer 3

您可以使用 jquery 回调来存档：

function showLi(){
$('#textSlider ul li').each(function(index, value){
    setTimeout(function(){
        $(value).animate({'left': '0px'},500).delay(500).animate({'left': '0px'},500).animate({'left':'-300px'},500);
    }, index*2000);
});
}

showLi();
setInterval(showLi, $("#textSlider ul li").length*2000);

见http://api.jquery.com/jQuery.each/

该索引用于延迟超时。

检查分叉的小提琴：

http://jsfiddle.net/3Dwkz/4/