逐个显示商品div

我想要做的是我逐渐淡入商品div。我已经使用了每个功能，但它似乎不工作。下面是我的小提琴。逐个显示商品div

我必须让它逐个消失。它只能通过jQuery完成吗？或者也可以使用css？请帮忙，谢谢

$(document).ready(function() 
 
{ 
 
    $(".product").each(function() 
 
    { 
 
    $(".product").fadeIn(2000); 
 
    }); 
 
});

.product { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/193438-image-808261.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 67,999/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali2/product/235/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/399926-image-168582.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 28,500/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/233/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/439340-image-372460.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 37,000/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/234/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/230325-image-680462.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 28,000/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/232/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-04-26 Alen

他们应该在淡出究竟如何？你希望每个后续的div等待前一个结束，还是应该在时间方面有某种重叠？ – j08691

Yess！我想先前完成，然后下一个 – Alen

.each()通过回调函数可以使用靶向每个格的索引。然后，使用一个延迟和淡出，您可以使用该索引与要错开的元素的外观秒数：

$(document).ready(function() { 
 
    $(".product").each(function(i) { 
 
    if (i === 0) 
 
     $(this).fadeIn(2000 * (i + 1)); 
 
    else 
 
     $(this).delay(2000 * i).fadeIn(2000 * i); 
 
    }); 
 
});

.product { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/193438-image-808261.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 67,999/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali2/product/235/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/399926-image-168582.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 28,500/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/233/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/439340-image-372460.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 37,000/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/234/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/230325-image-680462.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 28,000/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/232/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-04-26 17:19:12 j08691

这就是我想要的。现在我也学会了'each（）'的工作，谢谢:) – Alen

你得到.each这样你就可以访问每个选项的数组。

$(document).ready(function() 
{ 
    $(".product").each(function() 
    { 
    $(this).fadeIn(2000); 
    }); 
});

来源

2017-04-26 17:07:30 scartag

这将仍然在淡化所有在同一时间 – j08691

使用延迟并通过class.product这样的阵列循环，https://fiddle.jshell.net/yq8z15yo/

$(".product").each(function(i) { 
 
    $(this).delay(600 * i).fadeIn(2000); 
 
});

.product { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/193438-image-808261.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 67,999/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali2/product/235/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/399926-image-168582.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 28,500/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/233/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/439340-image-372460.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 37,000/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/234/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="product"> 
 
    <div class="fc-col"> 
 
    <div class="panel panel-primary"> 
 
     <div class="panel-heading fc-col-head"> 
 
     <div class="marquee"> ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P </div> 
 
     </div> 
 
     <div class="panel-body fc-col-body"> 
 
     <img src="../../../uploads/store/products/230325-image-680462.jpg" class="img-responsive" style="width:100%; height: 100%;" alt=" \t \t \t \t \t ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P \t \t \t \t " /> 
 
     </div> 
 
     <div class="panel-footer fc-col-footer"> 
 
     <span class="price">Rs. 
 
     \t 28,000/- 
 
     \t </span> 
 
     <br /> 
 
     <span class="price"> 
 
          <div class="fc-sale"> 
 
       <a href="/ali_store/sales/6">On Sale</a> 
 
       </div> 
 
          
 
      </span> 
 
     <span class="instock">In Stock</span> 
 
     <br /> 
 
     <div> 
 
      <a href="/store/ali_store/product/232/add_to_cart" class="pull-right add-to-cart btn btn-sm btn-default">Add to Cart</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-04-26 17:18:05

谢谢你的努力兄弟。 – Alen

@Alen欢迎。 –

逐个显示商品div

回答

相关问题