jquery - jquery中div的设置间隔

Question

这是我的 jquery prg。我已经完成了这项工作并正确地为图像设置了动画。这里第一个图像动画 2 秒并停止，第二个图像继续动画。在第四张图像动画后，我需要开始第一张图像动画。我想anim()无限次调用函数。请帮我

我的脚本在 jquery 中包含四个函数 showFirst、showSecond、showThird、showfour

这是anim函数以时间间隔调用四个函数

$(function anim() {

    $('div.f:not(:first)').hide(); // Hide all columns except the first
    $('div.s:not(:first)').hide(); // Hide all columns except the first
    $('div.c:not(:first)').hide(); // Hide all columns except the first
    $('div.d:not(:first)').hide(); // Hide all columns except the first
    // showFirst();

    var timesRun = 0;
    var interval = setInterval(function(){
        timesRun += 1;
        if(timesRun === 2){
            clearInterval(interval);

            var timesRun1= 0;
            var interval1 = setInterval(function(){
            timesRun1 += 1;
            if(timesRun1 === 2){
                clearInterval(interval1);

                var timesRun2 = 0;
                var interval2 = setInterval(function(){
                    timesRun2 += 1;
                    if(timesRun2 === 2){
                        clearInterval(interval2);
                        var timesRun3 = 0;
                        var interval3 = setInterval(function(){
                            timesRun3 += 1;
                            if(timesRun3 === 2){
                                clearInterval(interval3);
                            }
                            showFour();
                        }, 1000);
                    }
                    showSecond();   
                },1000); 
            }
            showThird();
        }, 1000); }showFirst();
    }, 1000);       
});

我有四个图像和四个备用图像。我以 2 秒的时间间隔更改了图像。我在动画函数中编写了这段代码。现在我在 anim 的函数内部调用。但它不起作用。

Answer 1

也许你正在寻找这样的东西？

var current = 0;
var i1 = 'http://jsfiddle.net/img/top-bg.png';
var i2 = 'http://jsfiddle.net/img/logo.png';

function anim() {
    if (++current > 4) {
        current = 1;
    }
    var div = $('#wrap div').eq(current);
    div.animate({
        height: '0px' // this can be also set to fixed size
    }, 2000, function() {
        var img = $(this).children('img')[0];
        img.src = img.src == i1 ? i2 : i1;
        $(this).animate({
            height: '100px'
        }, 2000, function() {
            anim();
        });
    });
}


$(document).ready(function() {
    $('#wrap img').prop('src', i1);
    anim();
});

@jsfiddle _

Answer 2

anim()其余动画完成后再次调用

     if(timesRun3 === 2){
          clearInterval(interval3);
          anim();
     }