Home/ Questions/Q 6000423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T00:41:28+00:00

i asked a question earlier about setting the animation loop to play more than

  • 0

i asked a question earlier about setting the animation loop to play more than twice;

once i added that code into my existing code it seems to send all my animated elements beserk; would you know what is being done wrong ?

Demo Link: http://www.prosperitymedia.co.uk/other/

the issue also is your browser might crash it has crashed my firefox a few times so beware, the animation seems to be going very crazy

$( 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();
}


    doAnimation();

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think there are a few issues here contributing to the issue. First of all, .hide() with no duration (and possibly other calls you’re using here) does not get queued, it is done immediately. Your loop is not waiting for the animation to complete before running through another iteration, that is why you see a lot of flickering.

    My suggestion would be to modify the code to wait for the first animation to finish before starting another. This can be done in multiple ways.

    One way to do this would be to figure out the entire running time of your animation and then add the recursive call instead into a settimeout:

    // (assuming a 30 second run time)

    setTimeout(function(){doAnimation();},30000);

    The other possibility is to figure out which of your animations will be the last to complete, then add a callback on that animation to start another animation once it is finished.

    EDIT: I mentioned multiple issues but then forgot to mention the other one. I didn’t add up the durations, but it seems that you have different items with different lengths of animation. If you do intend for these durations to be independent (one item on a 5 second loop, another on a 15 second loops, etc.) then the suggestion of waiting for it to complete obviously isn’t an option. In this case I would say you should probably have callbacks on each animation that start that individual animation again.

    • 0