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

我在这个简单的任务上做错了什么：我有两个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);

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

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

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

小提琴演示

这就是您想要的吗？为了方便起见，我把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>

相关内容

最新更新

热门标签：