Question

Hello Stack我有以下代码，它似乎只循环一次，我似乎无法解决为什么它不会无限循环。

你知道什么是错的吗？

这是演示：http://www.prosperitymedia.co.uk/other/

 $( function() {

    function doAnimation() {

    $('#ochreWrapper img').hide();
    $('#ochreTextOne, #ochreTextTwo, #ochreTextThree').hide();

    var displayIDs = "img#imgPisa, img#imgBankChina, img#imgSydney, img#imgPetronas, img#imgBooks, img#imgKremlin, img#imgBridge, img#imgEmpire, img#imgLetterbox, img#imgTrafficLight, img#imgPavement, img#imgOchre, img#imgStephensTower, img#imgClouds, img#imgBus, img#imgRickshaw, img#imgPlane, img#imgPeople, img#imgWoman, img#swooshOne, img#swooshTwo, img#swooshThree";


    $(displayIDs).css('display', 'block');
    $(displayIDs).animate({ opacity: 0 }, 0);



    //s1
    $('img#imgPisa').css({ "bottom" : "-30px"}).animate({ "bottom": "0", "opacity": 1}, 1000 );
    $('img#imgSydney').css({ "bottom" : "-40px" }).animate({ "bottom" : "0", "opacity": 1}, 1000 );
    $('img#imgPavement').css({ "bottom" : "0" }).animate({ "bottom" : "3%", "opacity": 1}, 1000 );

    //s2
    $('img#imgBankChina').css({ "bottom" : "-30px"}).delay(500).animate({ "bottom": "0", "opacity": 1}, 1000 );
    $('img#imgPetronas').css({ "bottom" : "5%"}).delay(500).animate({ "bottom": "12.1%", "opacity": 1}, 1000 );
    $('img#imgLetterbox').css({ "bottom" : "-20px"}).delay(500).animate({ "bottom": "0%", "opacity": 1}, 1000 );
    $('img#imgClouds').css({ "left" : "0"}).delay(500).animate({ "left": "0%", "opacity": 1}, 1000 ).delay(500).animate({ "left": "200px", "opacity" : 1 }, 25000);

    //s3
    $('img#imgKremlin').css({ "bottom" : "25%"}).delay(1000).animate({ "bottom": "34%", "opacity": 1}, 1000 );
    $('img#imgOchre').css({ "bottom" : "0"}).delay(1000).animate({ "bottom": "7%", "opacity": 1}, 1000 );

    //s4
    $('img#imgBooks').css({ "bottom" : "13%"}).delay(1500).animate({ "bottom": "23%", "opacity": 1}, 1000 );
    $('img#imgStephensTower').css({ "bottom" : "12%"}).delay(1500).animate({ "bottom": "22.5%", "opacity": 1}, 1000 );

    //s5
    $('img#imgBridge').css({ "bottom" : "36%"}).delay(2000).animate({ "bottom": "46%", "opacity": 1}, 1000 );

    //s6
    $('img#imgEmpire').css({ "bottom" : "38%"}).delay(2500).animate({ "bottom": "48.7%", "opacity": 1}, 1000 );
    $('img#imgTrafficLight').css({ "bottom" : "-10px"}).delay(2500).animate({ "bottom": "3%", "opacity": 1}, 1000 );

    //s7
    $('img#imgBus').css({ "left" : "5%"}).delay(3000).animate({"opacity" : 1}).animate({ "left": "1000px", "opacity": 1, "bottom" : "50px"}, 7000);
    $('img#imgPlane').delay(3000).animate({"opacity" : 1}).animate({ "left" : "80%", "opacity" : 1, "top" : "-75px" }, 20000);

    //s8
    $('img#imgRickshaw').css({ "left" : "5%"}).delay(4000).animate({"opacity" : 1}).animate({ "left": "1000px", "opacity": 1, "bottom" : "50px"}, 7000);

    //s9
    $('img#imgPeople, img#imgWoman').css({ "bottom" : "-20px" }).delay(10000).animate({"bottom" : "0", "opacity" : 1 }, 1000);

    //s10
    $('#ochreTextOne').delay(10000).fadeIn(1000).delay(10000).fadeOut(500);
    $('img#swooshTwo, img#swooshThree').hide();
    $('img#swooshOne').show().animate({ "opacity" : 1}, 0);
    $('img#swooshOneOverlay').css({ "right" : "0", "display" : "block" }).delay(10000).animate({ "right" : "1500px" }, 3000, function(){ $('img#swooshOne').hide(); $('img#swooshTwo, img#swooshThree').show().animate({ "opacity" : 1}, 0); }).delay(3000).delay(10100).animate({ "right" : "0" }, 3000);
    $('img#swooshTwoOverlay').css({ "right" : "-1500px", "display" : "block" }).delay(10100).animate({ "right" : "0px" }, 3000).delay(3000).delay(10000).animate({ "right" : "-1500px" }, 3000);


    //s11
    $('#ochreTextTwo').css({ "padding-left" : "50px" }).delay(22000).fadeIn(1000).delay(10000).fadeOut(500);


    //s12
    $('#ochreTextThree').css({ "padding-left" : "50px" }).delay(33000).fadeIn(1000).delay(10000).fadeOut(500).delay(0, doAnimation)

    }


    doAnimation();

});

Answer 1

您只需拨打doAnimation();一次，因此只会运行一次。

在doAnimation函数末尾添加对doAnimation()的调用以无限循环：

      //s12
      $('#ochreTextThree').css({ "padding-left" : "50px" }).delay(33000).fadeIn(1000).delay(10000).fadeOut(500).delay(0, doAnimation)


      //Call function again to loop
      doAnimation();  
    }

    doAnimation();

});

Answer 2

    ...
    setInterval(doAnimation, 1000);    
});

这将设置为doAnimation每1秒运行一次（减少1000以减少间隔的长度 - 500将是半秒，100将是十分之一秒等）< / p>

Answer 3

这是因为你只调用一次main函数，在其中只调用doAnimation（）函数两次。一旦你宣布它，然后一次。

jquery函数只循环两次（应该是无限的）

3 个答案: