$ .eachとsetIntervalを使用した連続アニメーションのループ？

Question

私はdiv要素のセットがあります。

<div class="alert-container"> 
    <div class="alert">alert 1 text</div> 
    <div class="alert">alert 2 text</div> 
    <div class="alert">alert 3 text</div> 
</div> 

私は次のようにそれらを一つ一つをアニメーション化する：

1. 警告1 slideInDown>を3秒を待つ>警告1 slideOutDown>
2. 警告2 slideInDown>待つ3S>アラート2 slideOutDown>
3. 警告3 slideInDown>待つ3S>警告3 slideOutDown>
[1]から
4. リピート

---

私のJSの現在の状態がこのようである：

$('.alert-container .alert').each(function(index) { 

    $(this).addClass('animated slideInDown').show().one(animationEnd, function(){ 
    $(this).removeClass('animated slideInDown').addClass('animated slideOutDown').one(animationEnd, function(){ 
     $(this).removeClass('animated slideOutDown').hide(); 
    }); 
    }); 

}); 

追加されたクラスで見ることができるように私は、animate.cssを使用していますが、これは、現在の結果を持っています同時に3つすべてのアニメーションを.alert divにすることができますこれを修正して1つずつアニメーション化し、無限に繰り返す必要があります。

でも他のSOの記事を確認した後、私は私が望む結果を達成するために、setIntervalと$.eachを使用する場所のまわりで私の頭を包むのに苦労しています、と私はindexなどに基づいてinitialDelay変数を使用する必要があるかどうかを

助けてください。どうもありがとう。

Answer 1

あなたは、コードの下に試すことがあります。

$(document).ready(function(){ 

    var slideArray = $(".alert-container > .alert"); 
    var slideTime = 3000; //3 seconds 
    var currentSlideIndex = 0; 
    setInterval(function(){ 
     if(currentSlideIndex < slideArray.length){ 
      animateSlide(currentSlideIndex); 
      currentSlideIndex++; 
     } 
     else 
     { 
      currentSlideIndex = 0; 
      animateSlide(currentSlideIndex); 
     } 
    },slideTime); 

    function animateSlide(slideIndex){ 
     var slideObject = slideArray[slideIndex]; //get the slide object to animate 

     $(slideObject).addClass('animated slideInDown').show().one(animationEnd, function(){ 
      $(slideObject).removeClass('animated slideInDown').addClass('animated slideOutDown').one(animationEnd, function(){ 
       $(slideObject).removeClass('animated slideOutDown').hide(); 
      }); 
     }); 
    } 
}) 

基本的にあなたが直接$.eachループでsetIntervalを使用することはできません。この方法を避けるには、一度に1つのスライドをindexでアニメーションできます。

注 - 私は上記のコードをテストできませんでした。しかし、私はそれが動作するはずだと思います。

Answer 2

誰もが正確なコードがvijayPの答えを使用して実装見たい場合は、ここにある：

jQuery(document).ready(function($) { 

    var alertArr = $(".alert-container .alert"); 
    var alertTime = 6500; 
    var visibleAlert = 0; 
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 

    // loop through array of alerts 

    function loopAlerts(){ 
    if(visibleAlert < alertArr.length) { 
     animateAlert(visibleAlert); 
     visibleAlert++ 
    } else { 
     visibleAlert = 0; 
     animateAlert(visibleAlert); 
     visibleAlert++ 
    } 
    } 

    // alert slideInDown > wait 3s > slideOutDown 

    function animateAlert(visibleAlert){ 

    var alert = alertArr[visibleAlert]; 

    $(alert).addClass('slideInDown').removeClass('hide').one(animationEnd, function(){ 
     $('.minor-alerts .marquee .alert').removeClass('slideInDown slideOutDown'); 
     setTimeout(function(){ 
     $(alert).addClass('slideOutDown').one(animationEnd, function(){ 
      $(alert).addClass('hide').removeClass('slideOutDown slideInDown'); 
     }); 
     }, 3000); 
    }); 
    } 

    setInterval(loopAlerts, alertTime); 

});