Как использовать эффект анимации JavaScript внутри цикла?

Я пытаюсь добавить эффект анимации с помощью JavaScript wow.js поэтому я инициализировать его:Как использовать эффект анимации JavaScript внутри цикла?

<head> 
    <link rel="stylesheet" href="css/animate.css"> 
    <script src="js/wow.min.js"></script> 
    <script> 
    new WOW().init(); 
    </script> 
</head>

и я поместил эффект класса (wow slideInRight) внутри моего div:

<div class="row row-sm padder-lg "> 

     <?php 
     foreach ($top->tracks->track as $key => $value) 
     { 
      if($key >= $this->config->item("items_top")) 
       return false; 
      $image = $value->image[3]->text; 
       if($image == '') 
      $image = $value->image[2]->text; 
       if($image == '') 
      $image = base_url()."assets/images/no-cover.png"; 
     ?>  
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      <div class="item wow slideInRight"> 
       <img style="background:url('<?php echo $image; ?>')"/> 
      </div> 
     </div> 
     <?php 
     } 
     ?> 
</div>

Проблема заключается в том что вместо того, чтобы показывать эффект для каждого отдельного элемента, этот JavaScript показывает эффект одновременно для всех элементов. Каков правильный способ использования этого JavaScript в цикле?

источник

2015-03-16 NineCattoRules

WOW.js инициализации следует поместить в конце вашего <body> не <head>, что-то вроде этого:

<script src="js/wow.min.js"></script> 
    <script> 
    new WOW().init(); 
    </script> 
    </body> 
</html>

Кроме этого, помните, что wowjs начинает анимацию, когда вы достигнете объектов во время прокрутки, все ваш товар в той же строке, поэтому на той же высоте, правильно, что анимация начинается вместе.

Если вам нужно, чтобы они начинались последовательно (то есть сначала слева, а затем остальные, пока вы не дошли до последнего справа) добавьте правильное data-wow-delay="<number_of_seconds>s" к вам, с и увеличивая число__секунд.

EDIT:

Вы можете сделать что-то вдоль этих линий:

<div class="row row-sm padder-lg "> 

     <?php 

     $delay=0; 

     foreach ($top->tracks->track as $key => $value) 
     { 
      if($key >= $this->config->item("items_top")) 
       return false; 
      $image = $value->image[3]->text; 
       if($image == '') 
      $image = $value->image[2]->text; 
       if($image == '') 
      $image = base_url()."assets/images/no-cover.png"; 
     ?>  
     <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      <div class="item wow slideInRight" data-wow-delay="<?php echo $delay; ?>s"> 
       <img style="background:url('<?php echo $image; ?>')"/> 
      </div> 
     </div> 
     <?php 
      $delay+=0.5; 
     } 
     ?> 
</div>

это то, что вам нужно?

источник

2015-03-17 13:03:52

но как я могу использовать это на петле? Данные задержки я имею в виду – NineCattoRules

Я обновлю свой ответ. –

после моей попытки ... wow.js должен быть инициализирован перед циклом, иначе это не сработает, но главная проблема заключается в том, что при прокрутке ничего не отображается, и я не понимаю причину. – NineCattoRules

Как использовать эффект анимации JavaScript внутри цикла?

ответ

Смежные вопросы