Question

我的问题很简单，但我无法弄清楚如何，我有这两个div，

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

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

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

首先加载div 1 - 等待10秒 - 然后加载div 2，（隐藏Div 1） - 等待10秒 - ＆gt; 然后加载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文件。

let test1 = [2,4,6,8]

if test1.allOdds {
    print(true)
} else {
    print(false)     // false
}

＆＃13;

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

＆＃13;

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

＆＃13;

#text1{
    display: none;
}

＆＃13;

Answer 2

这是一个简单的解决方案。我的代码每2秒运行一次，但您可以将其更新为每10秒运行一次。希望它有所帮助！

＆＃13;

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

＆＃13;

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

＆＃13;

动画div与时间

2 个答案: