Animate divs with time

Question

My question is simple yet I can't figure out how, I have this two divs,

<div id="text1">
...
</div>

<div id="text2">
 ...
</div>

I need a javascript function to toggle between these two divs.

first load div 1 -- wait 10 seconds -- then load div 2,(hide Div 1) -- wait 10 seconds --> then load div 1,(hide Div 2) -- wait 10 seconds -- then load div 2,(hide Div 1)

like wise pattern should continue. I am newbie to Javascript so detailed explanation would be appriciated. Thanks.

UPDATE

This is what i have done so far,

AnimateBannerTeks();

function AnimateBannerTeks() {
    $('#text1').removeClass('animated fadeInUp').fadeOut('fast');
    $('#text1').hide();
    $('#text2').addClass('animated fadeInUp').fadeIn('fast');
    $('#text2').show();
    dodelay();
    AnimateBannerTeks1();
}

function AnimateBannerTeks1() {
    $('#text2').removeClass('animated fadeInUp').fadeOut('fast');
    $('#text2').hide();
    $('#text1').addClass('animated fadeInUp').fadeIn('fast');
    $('#text1').show();
    dodelay();
    AnimateBannerTeks();
}


function dodelay(){
    setTimeout(function(){return true;},60000);
}

What have you come up with so far? – Robert Jan 22 '17 at 04:25 — Robert, Jan 22 '17 at 04:25
jQuery has animation functions like `hide` and `show` – Jaromanda X Jan 22 '17 at 04:34 — Jaromanda X, Jan 22 '17 at 04:34

Riya · Answer 1 · 2017-01-22T04:58:41.603

2

jQuery will do that for you. Be sure to include jQuery files in your code.

jQuery(document).ready(function( $ ) {
    var dd = function(){
      $("#text1, #text2").toggle('fast');  
    }
    setInterval(dd, 10000);
});

jQuery(document).ready(function( $ ) {   
    var dd = function(){
      $("#text1, #text2").toggle('fast');        
    }
    setInterval(dd, 1000);
});

#text1{
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='text1'><p>Para1</p></div>
<div id='text2'><p>Para2</p></div>

edited Jan 22 '17 at 04:58

answered Jan 22 '17 at 04:39

Riya

180
2
15

Yeah, this will do. but how could I animate with this like above? – Eranga Premathilaka Jan 22 '17 at 04:51
pass 'fast' as an argument in toggle(). – Riya Jan 22 '17 at 04:56

score 1 · Accepted Answer · answered Jan 22 '17 at 04:48

Here's a simple solution. My code runs every 2 seconds but you can update it to run every 10 seconds. Hope it helps!

$(document).ready(function () {
        AnimateBannerTeks();
    })
    function AnimateBannerTeks(){
        $('#text1').show();
        setTimeout(function(){ $('#text1').hide(); showDiv2() },2000);
    }
    function showDiv2(){
        $('#text2').show();
        setTimeout(function(){ $('#text2').hide(); AnimateBannerTeks() },2000);
    }

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<div id="text1" style='width:100px; height:100px; background:red; display:none;'></div>
<div id='text2' style='width:100px; height:100px; background:#ccc; display:none;'></div>

Thank you very much. this is the exact answer I looked for. Thanks you very much. — Eranga Premathilaka, Jan 22 '17 at 04:55

Animate divs with time

2 Answers2