如何循环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”。