jquery - jQuery setInterval() 函数 - 如何缩短第一个/开始循环

Question

我正在使用 setInterval 函数创建一个带有文本滑块动画的循环：

见小提琴

HTML：

<div id="Slider">
<ul>
    <li class="active">Semper Fidelis</li>
    <li>Amat Victoria Curam</li>
</ul>
</div>

CSS：

#Slider{
    position: relative;
    left: 50px;
}
#Slider ul{
    list-style: none;
}
#Slider ul li{
    position: relative;
    top: -100px;
    line-height: 0px;
}

JS：

setInterval(function(){
    var $current = $('#Slider ul li.active').animate({'top': '50px'},800)
    .delay(2000).animate({'top': '50px'},800)
    .animate({'top':'-100px'},500)
    .removeClass('active');
    
    if($current.next('li').length > 0) {
        $current.next('li').addClass('active');
    } else {
        $current.siblings('li:eq(0)').addClass('active');
    }
}, 5000);

现在您可以看到，该函数需要 5000 毫秒才能启动......现在这对于第 2 到第 n 个循环非常有用，但我希望第一次运行更早开始，比如 1000 毫秒而不是 5000 毫秒，同时仍然保持循环之间的暂停 5000 毫秒。 ..

我怎么做？

谢谢

Answer 1

可以这样做，使用 asetTimeout()进行初始启动，然后setInterval处理每次重复运行。

function myAnimation(){
    var $current = $('#Slider ul li.active').animate({'top': '50px'},800)
    .delay(2000).animate({'top': '50px'},800)
    .animate({'top':'-100px'},500)
    .removeClass('active');

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

setTimeout(function(){
    myAnimation();
    setInterval(myAnimation, 5000);
}, 1000);

Answer 2

只需将您的代码放在一个函数中并单独调用该函数

var animate = function () {
    var $current = $('#Slider ul li.active').animate({'top': '50px'},800)
    .delay(2000).animate({'top': '50px'},800)
    .animate({'top':'-100px'},500)
    .removeClass('active');

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

setTimeout(function () {
    animate();
    setInterval(animate, 5000);
}, 1000);