CODEWITHSUNDEEP
jquery
Nips
Nips

Reputation: 13860

How to loop animation with delay?

I have images that change every 5000ms and I wanted to put subtitles on them. I have this:

    function showEl1(){
        $('#wrap').animate({ 
                left: '-450',
            }, 500, function() { 
                $('#wrap').html($('#el1').html()); 
            }).animate({ left: '70',}, 500);
        setTimeout(showEl2, 5000);
    }

    function showEl2(){
        $('#wrap').animate({ 
                left: '-450',
            }, 500, function() { 
                $('#wrap').html($('#el2').html()); 
            }).animate({ left: '70',}, 500);
        setTimeout(showEl3, 5000);
    }

    function showEl3(){
        $('#wrap').animate({ 
                left: '-450',
            }, 500, function() { 
                $('#wrap').html($('#el3').html()); 
            }).animate({ left: '70',}, 500);
        setTimeout(showEl1, 5000);
    }

    $(document).ready(function(){
        showEl1();
    }

And it works but... I want to hide subtitles a little earlier, wait a moment and then show the next. How to do it?

Upvotes: 0

Views: 274

Answers (1)

Mikey G
Mikey G

Reputation: 3491

try wrapping each setTimeout in another setTimeout:

setTimeout(function() { setTimeout(showElq, 5000); }, 1000);

Upvotes: 1

Related Questions