CODEWITHSUNDEEP
javascriptjquery
Eranga Premathilaka
Eranga Premathilaka

Reputation: 125

Animate divs with time

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

Upvotes: 1

Views: 94

Answers (2)

Riya
Riya

Reputation: 190

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>

Upvotes: 2

HenryDev
HenryDev

Reputation: 4953

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>

Upvotes: 1

Related Questions