Question

我想遍历一组div（latest_holder [n]），让他们的孙子（latest_imageholder）淡入淡出，从第一个可见的负载开始。

我的HTML看起来像这样：

        <div class="row latest_holder0">
            <div class="col-sm-12">
                <div class="latest_imageholder">image</div>
                <div class="latest_imageholder">image</div>
            </div>
        </div>

        <div class="row latest_holder1">
            <div class="col-sm-12">
                <div class="latest_imageholder">image</div>
                <div class="latest_imageholder">image</div>
                <div class="latest_imageholder">image</div>
            </div>
        </div>


        <div class="row latest_holder2">
            <div class="col-sm-12">
                <div class="latest_imageholder">image</div>
                <div class="latest_imageholder">image</div>
                <div class="latest_imageholder">image</div>
                <div class="latest_imageholder">image</div>
            </div>
        </div>

        <div class="row latest_holder3">
            <div class="col-sm-12">
                <div class="latest_imageholder">image</div>
            </div>
        </div>

        ...etc

正如您所看到的，并不能断言last_holder [n]是否有1个或更多的孙子。

我尝试这样的事情：

( function($) {
    "use strict";
    $(window).load( function() {
        $("div[class^='latest_holder']").each(function() {
            $(".latest_imageholder").each(function() {
                (function fadeItems(elem){   
                    elem.fadeIn('slow',function(){      
                       $(this).fadeOut('slow', function(){   
                           if($(this).next().length > 0){
                             fadeItems($(this).next());   
                           } 
                           else{
                               setTimeout(fadeItems, 0, $("div.latest_imageholder:first"));
                           }
                       }); 
                    });
                })( $("div.latest_imageholder:first") );
            });
        });
    });
})(jQuery);

但这只会循环第一个div。

我还想让第一个div可见约3秒钟，然后开始淡入下一个（如果有）...

Answer 1

您可以将setTimeout与每个类似的index一起使用：

setTimeout(function() {
   self.fadeIn('slow');
}, index * 500);

(function($) {
  $(".latest_imageholder").hide();

  $("div[class*='latest_holder']").each(function() {
    $(".latest_imageholder", this).each(function(index, elem) {
      var self = $(this);

      setTimeout(function() {
        self.fadeIn('slow');
      }, index * 500);
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row latest_holder0">
  <div class="col-sm-12">
    <div class="latest_imageholder">image</div>
    <div class="latest_imageholder">image</div>
  </div>
</div>
<hr>
<div class="row latest_holder1">
  <div class="col-sm-12">
    <div class="latest_imageholder">image</div>
    <div class="latest_imageholder">image</div>
    <div class="latest_imageholder">image</div>
  </div>
</div>
<hr>
<div class="row latest_holder2">
  <div class="col-sm-12">
    <div class="latest_imageholder">image</div>
    <div class="latest_imageholder">image</div>
    <div class="latest_imageholder">image</div>
    <div class="latest_imageholder">image</div>
  </div>
</div>
<hr>
<div class="row latest_holder3">
  <div class="col-sm-12">
    <div class="latest_imageholder">image</div>
  </div>
</div>

显示带有儿童淡入淡出的div

1 个答案: