анимировать дивы со временем

Question

Моим вопрос прост, но я не могу понять, как, у меня есть эти две дивов,

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

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

Мне нужен яваскрипт функция для переключения между этими двумя дивами.

первый груз ДИВ 1 - подождите 10 секунд - затем ДИВ нагрузки 2, (скрыть Div 1) - подождите 10 секунд -> затем нагрузка DIV 1, (скрыть Div 2) - подождите 10 секунд - , затем загрузите div 2, (скрыть Div 1)

как мудрый шаблон должен быть продолжен. Я новичок в Javascript, поэтому подробное объяснение будет рассмотрено. Благодарю.

UPDATE

Это то, что я делал до сих пор,

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

Answer 1

Вот простое решение. Мой код работает каждые 2 секунды, но вы можете обновлять его каждые 10 секунд. Надеюсь, поможет!

$(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>

Answer 2

JQuery сделает это за вас. Обязательно включайте файлы jQuery в свой код.

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>