CODEWITHSUNDEEP
jquery
Xavier
Xavier

Reputation: 8362

jquery function only looping twice (should be infinite)

Hello Stack i have the below code and it only seems to loop once, i cant seem to work out why it will not loop infinitely.

Do you know whats wrong?

here is the demo: 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();

});

Upvotes: 0

Views: 255

Answers (3)

Ryan Kinal
Ryan Kinal

Reputation: 17732

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

This will set it up so doAnimation runs every 1 second (decrease the 1000 to decrease the length of the interval - 500 would be half a second, 100 would be a tenth of a second, etc.)

Upvotes: 1

Ant
Ant

Reputation: 3887

You're only calling doAnimation(); once so it will only run once.

Add a call to doAnimation() at the end of the doAnimation function to loop indefinitely:

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


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

    doAnimation();

});

Upvotes: 1

José Valente
José Valente

Reputation: 331

This is because you are only calling the main function once, and in it you only call the doAnimation() function twice. Once where you declare it and once after.

Upvotes: 0

Related Questions