用时间动画 div

Question

我的问题很简单，但我不知道怎么做， 我有这两个 div，

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

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

我需要一个 javascript 函数来在这两个 div 之间切换。

首先加载 div 1 -- 等10秒—— 然后加载 div 2,(隐藏 Div 1) -- 等待 10 秒 --> 然后加载 div 1,(隐藏 div 2) -- 等10秒—— 然后加载 div 2，（隐藏 div 1）

类似明智的模式应该继续。我是 Javascript 的新手，所以会有详细的解释。谢谢。

更新

这是我到目前为止所做的，

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

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>

Answer 2

这是一个简单的解决方案。我的代码每 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>