Question

我试图循环我创建的功能。它目前只运行一次然后停止。在当前状态下，我使用setTimeout来延迟功能。

使用Javascript：

function firstSlide() {
    setTimeout(function() {
        $('.survey').addClass('slide');
    }, 400);
    setTimeout(function() {
        $('.curve-1, .curve-2').addClass('slide');
    }, 1400);
}

function secondSlide() {
    $('.cover-1').fadeOut(400, function() {
        $('.survey, .curve-1, .curve-2').removeClass('slide');
        $('.cover-2').fadeIn(400);
        setTimeout(function() {
            $('.curve-3, .curve-4').addClass('slide');
        }, 400);
        setTimeout(function() {
            $('.magnify-1').addClass('pop');
        }, 1400);
        setTimeout(function() {
            $('.magnify-2').addClass('pop');
        }, 2400);
    });
}

function thirdSlide() {
    $('.cover-2').fadeOut(400, function() {
        $('.curve-3, .curve-4').removeClass('slide');
        $('.magnify-1, .magnify-2').removeClass('pop');
        $('.cover-3').fadeIn(400);
        setTimeout(function() {
            $('.double-survey').addClass('slide');
        }, 400);
    });
}

setTimeout(firstSlide, 0);
setTimeout(secondSlide, 6000);
setTimeout(thirdSlide, 12000);

HTML

       <div class="cover-1 cover">
            <img class="curve-1" src="images/home/curve-1@2x.png">
            <img class="curve-2" src="images/home/curve-2@2x.png">
            <img class="survey" src="images/home/survey@2x.png">
        </div>
        <div class="cover-2 cover" style="display: none">
            <img class="curve-3" src="images/home/curve-3@2x.png">
            <img class="curve-4" src="images/home/curve-4@2x.png">
            <img class="magnify-1" src="images/home/magnify-1@2x.png">
            <img class="magnify-2" src="images/home/magnify-2@2x.png">
        </div>
        <div class="cover-3 cover" style="display: none">
            <img class="curve-1" src="images/home/curve-1@2x.png">
            <img class="curve-2" src="images/home/curve-2@2x.png">
            <img class="double-survey" src="images/home/double-survey@2x.png">
        </div>

Answer 1

在每个函数结束时调用下一个函数

function firstSlide(){
  ............
 setTimeout(secondSlide, 6000);
}

function secondSlide() {
  ..........
  setTimeout(thirdSlide, 12000);
}

function thirdSlide() {
 ................
 setTimeout(firstSlide, 0);
}

并删除这两个：

setTimeout(secondSlide, 6000);
setTimeout(thirdSlide, 12000);

保持jQuery动画循环

1 个答案: