加载时多个动画的jQuery无限循环

Question

我有一系列在文档加载时加载的动画（参见代码），我希望它在播放后循环播放我尝试了一些技术但似乎无法正确使用，请你帮帮我！

$(function(){



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


//css set everything outside of the frame



//animate in

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#swooshOne').delay(11000).animate({ "opacity" : 1 });
$('img#swooshOneOverlay').css({ "right" : "-300px", "display" : "block" }).delay(11000).animate({ "left" : "-100px" }, 10000, function(){ $(this).hide(); $('img#swooshOne').hide(); }) ;


//s11
$('#ochreTextTwo').css({ "padding-left" : "50px" }).delay(22000).fadeIn(1000).delay(10000).fadeOut(500);
$('img#swooshTwo').delay(22000).animate({ "opacity" : 1 });
$('img#swooshThree').delay(22000).animate({ "opacity" : 1 });
$('img#swooshTwoOverlay').css({ "right" : "-250px", "display" : "block" }).delay(22000).animate({ "left" : "-200px" }, 10000, function(){ $(this).hide(); $('img#swooshTwo, img#swooshThree').hide(); }) ;


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

});

Answer 1

我不知道您尝试了什么，但使用您所拥有的，将所有内容放入一个函数中，然后在加载时调用该函数。在动画的最后一步，使用回调再次调用动画。

$( function() {

    // Make a function for your animation stuff
    function doAnimation() {
       //All of your animation stuff

       // On your last animation step, use a callback to call the animation stuff again:
       $('#ochreTextThree').css({ "padding-left" : "50px"}).delay(33000).fadeIn(1000).delay(10000).fadeOut(500, doAnimation)

    }

    // Call the first iteration of your animation loop:
    doAnimation();

});