逐個顯示商品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

回答

相關問題