如何在循环中使用JavaScript动画效果？_Javascript_Wow.js

如何在循环中使用JavaScript动画效果？

javascript

如何在循环中使用JavaScript动画效果？,javascript,wow.js,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> 问题在于，这个JavaScript并没有

我正在尝试使用添加JavaScript动画效果，因此我对其进行了初始化：

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

问题在于，这个JavaScript并没有显示每个项目的效果，而是同时显示所有项目的效果。在循环中使用此JavaScript的正确方法是什么？

WOW.js初始化应该放在

的末尾，而不是

中，类似这样：

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


新的WOW（）.init（）；

除此之外，请记住，当您在滚动时到达对象时，wowjs会启动动画，您的所有项目都在同一行上，因此在相同的高度，动画一起启动是正确的

如果您需要按顺序开始（即先从最左边开始，然后再从其他开始，直到您到达右侧的最后一个），请向divs添加适当的

data wow delay=“s”

，并增加秒数

编辑：

您可以按照以下思路做一些事情：

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


不，我从来没有试过把它放在脑袋里，但它可以工作，我不知道。为什么您将图像作为img的背景，而不仅仅是src=“”？如果你把它作为背景，你也应该设置宽度和高度在该样式。。。否则，将得到大小为0,0的图像。尝试使用src，在我看来更简单，或者设置宽度和高度（也可能是display:block）。检查这个fiddle:，忽略错误的位置，这是jsfiddle的错误，但是图像是以正确的时间设置动画的。你在用chrome吗？你们能打开开发者工具，右键点击，检查元素并验证你们是否有一个显示：在那个div或img上并没有显示？这件事一定行得通。这船样式中有一些错误，其中之一是隐藏div或img或将其大小调整为0。还请检查该php生成的html以查看是否有意外情况，仅检查源php没有意义，生成的html有什么问题。A也许当你试图解决这个问题时，删除一些不太有用的样式，如r、r-2x、img full，以验证它们不是导致此问题的原因。试试这个：，这是否符合你的要求？滚动一点。。。
<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>