建立一個簡單的股票，每隔6秒使用animate.css更改divs

我在這裏做了一些錯誤的事情，這個簡單的任務：我有2個div，都有id's，我希望每隔6秒就換一個div ，就是這樣（動畫CSS動畫，進入和離開）。這是我的html：建立一個簡單的股票，每隔6秒使用animate.css更改divs

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

和IM在間隔這樣每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);

第一次迭代是好的，第二個開始跳，去瘋狂，這段代碼有什麼問題？

來源

2015-11-03 totothegreat

，因爲你不是從elementToReturn刪除類，添加到您的函數：

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

fiddle demo

來源

2015-11-03 15:35:00

它的工作，有沒有更好的，更專業的方式來寫這個東西？ – totothegreat

我的代碼看起來像[這個小提琴]（http://jsfiddle.net/xevwt2ex/1/）。不要將自己限制在兩張幻燈片中，我會在JS中使用一些單獨的類，這些類不會出現在CSS中。例如前綴爲js- *或__ * –

這是你想要的嗎？爲了方便，我將時間從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>

來源

2015-11-03 15:39:55

建立一個簡單的股票，每隔6秒使用animate.css更改divs

回答

相關問題