使用 animate.css 构建一个每 6 秒更改一次 div 的简单代码

Question

我在这个简单的任务中做错了：我有 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>

我每 6 秒间隔执行一次：（angular 间隔）

 $interval(function(){
            //check which is the one with the display none, this should be the one that enters and the other one goes out
            var element         = null;
            var elementToReturn = null;
            if($('#tickBox2').css('display') == 'none')
            {
                element         = $('#tickBox1');

                elementToReturn = $('#tickBox2');

            } else {
                element         = $('#tickBox2');

                elementToReturn = $('#tickBox1');

            }
            element.addClass('animated slideOutDown');
            element.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
                elementToReturn.addClass('animated slideInDown');
                elementToReturn.css("display", "block");
                element.css("display", "none");
                element.removeClass("animated slideInDown");
            });
        },6000);

第一个迭代很好，第二个就开始跳起来发疯了，这段代码有什么问题吗？

Answer 1

因为您没有从 elementToReturn 中删除类，所以添加到您的函数：

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

fiddle demo

Answer 2

这是你想要的吗？为了方便起见，我从 6 秒改为 2 秒。 http://jsfiddle.net/59698L32/

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

});

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

}

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

使用 animate.css 构建一个每 6 秒更改一次 div 的简单代码

Build a simple ticker that change the divs every 6 seconds using animate.css

javascript

css

jquery

animate.css