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秒在间隔中执行此操作:(角度间隔）

 $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

2 个答案: