如何循環WOW動畫時間

Question

我有一個頁面，內容有不同時間延遲的Wow動畫。這是我的例子。

<div class="col-sm-6 col-md-3"> 
     <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="500ms"> 
      <h4>Air Cargo Services</h4> 
      <p class="contnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
     </div> 
     </div>   

     <div class="col-sm-6 col-md-3"> 
     <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="700ms"> 
      <h4>Air Cargo Services</h4> 
      <p class="contnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
     </div> 
     </div> 

     <div class="col-sm-6 col-md-3"> 
     <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="900ms"> 
      <h4>Air Cargo Services</h4> 
      <p class="contnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
     </div> 
     </div> 

它在這裏工作。但我實際上做的是，數據將從數據庫添加到這個div中。在我的PHP代碼中，我只添加了一個div來附加數據，並且這個div將循環。

{% for service in services %} 
<div class="col-sm-6 col-md-3"> 
    <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="500ms"> 
      <h4>{{ service['name'] }}</h4> 
      <p>{{ str_limit(service['description'], 100) }}</p> 
    </div> 
</div> {% endfor %} 

問題是，當div被循環時，每個div的WoW延遲時間爲500。所以每個div都在一次顯示。我需要上面的確切的HTML代碼。當div被循環時如何做。幫我。

謝謝。

Answer 1

使用此腳本爲幻燈片動態設置時間。請記住，您必須將dynamicDelay中的數組元素與您的wow slider幻燈片計數完全匹配。否則，您將獲得爲幻燈片定義的默認值。

$(document).ready(function() { 
 
    var dynamicDelay = [ 
 
    1500, 
 
    1000, 
 
    1200 
 
    ]; 
 
    var fallbackValue = "500ms"; 
 

 
    $(".service-item.wow").each(function(index) { 
 
    $(this).attr("data-wow-delay", typeof dynamicDelay[index] === 'undefined' ? fallbackValue : dynamicDelay[index] + "ms"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wow-slider-container"> 
 
    <div class="col-sm-6 col-md-3"> 
 
    <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="500ms"> 
 
     <h4>Air Cargo Services</h4> 
 
     <p class="contnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-sm-6 col-md-3"> 
 
    <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="700ms"> 
 
     <h4>Air Cargo Services</h4> 
 
     <p class="contnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="col-sm-6 col-md-3"> 
 
    <div class="service-item hvr-grow wow fadeIn" data-wow-duration="500" data-wow-delay="900ms"> 
 
     <h4>Air Cargo Services</h4> 
 
     <p class="contnt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 
    </div> 
 
    </div> 
 
</div>

PS：我已經加入的情況下，你忘了滑塊號碼完全匹配到dynamicDelay陣列元件的回退方法。它會自動爲滑塊延遲分配「500ms」。