Javascript 使用animate.css构建一个简单的ticker，每6秒更改一次div_Javascript_Jquery_Css_Animate.css

Javascript 使用animate.css构建一个简单的ticker，每6秒更改一次div

javascript jquery css

Javascript 使用animate.css构建一个简单的ticker，每6秒更改一次div,javascript,jquery,css,animate.css,Javascript,Jquery,Css,Animate.css,我在这个简单的任务中犯了一些错误：我有2个div，两个都有id，我希望每6秒一个替换另一个，就是这样（使用动画css动画，输入和离开）。这是我的html： <div class="mood-area" style="position:relative"> <div style="width:100%;height:100%;position:absolute" id="tickBox1"> First div &

我在这个简单的任务中犯了一些错误：我有2个div，两个都有id，我希望每6秒一个替换另一个，就是这样（使用动画css动画，输入和离开）。这是我的html：

 <div class="mood-area" style="position:relative">
        <div style="width:100%;height:100%;position:absolute" id="tickBox1">
           First div
        </div>
        <div style="width:100%;height:100%;position:absolute;display:none" id="tickBox2">
            <div class="flex-all flex-center" style="width:100%;height:100%;">
                Some other Div
            </div>
        </div>
    </div>

第一次迭代很好，第二次迭代开始跳跃并变得疯狂，这段代码有什么问题？

因为您没有从

元素中删除类。要返回

，请添加到函数中：

elementToReturn.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    elementToReturn.removeClass('animated slideInDown slideOutDown');
});

这就是你想要的吗？为了方便起见，我把时间从6秒改为2秒。

和html：

<body>

    <div class="container">
        <div class="content" id="first">

        </div>   
        <div class="content hide" id="second">

        </div>  

    </div>

    <a href="#" id="start">START</a>

<body>

成功了，有没有更好、更专业的方法来编写这个东西？我的代码看起来像这样。不要把自己限制在两张幻灯片上，我会在JS中使用一些单独的类，这些类不会出现在CSS中。例如，前缀为js-*或__*

$("#start").on("click", function(){
   change();

});

function change(){
 setTimeout(function(){
    $(".content").slideToggle(2000);
     change();
 }, 2000);

}

<body>

    <div class="container">
        <div class="content" id="first">

        </div>   
        <div class="content hide" id="second">

        </div>  

    </div>

    <a href="#" id="start">START</a>

<body>