逐个显示产品div

时间：2017-04-26 17:04:13

标签： javascript jquery html css

我想做的是我逐渐淡化产品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=" 					ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	67,999/-
        	</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=" 					ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	28,500/-
        	</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=" 					ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	37,000/-
        	</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=" 					ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	28,000/-
        	</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>

3 个答案:

答案 0 :(得分：1)

您获得了一个包含.each的数组，以便您可以访问每个项目。

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

答案 1 :(得分：1)

使用延迟并循环遍历此class .product数组，https://fiddle.jshell.net/yq8z15yo/

＆＃13;
＆＃13; 
$(".product").each(function(i) {
  $(this).delay(600 * i).fadeIn(2000);
});
＆＃13; 
.product {
  display: none;
}
＆＃13; 
<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=" 					ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	67,999/-
        	</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=" 					ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	28,500/-
        	</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=" 					ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	37,000/-
        	</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=" 					ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	28,000/-
        	</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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

.each()将回调函数传递给您可用于定位每个div的索引。然后使用延迟和淡出，您可以使用该索引与您想要错开元素外观的秒数：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".product").each(function(i) {
    if (i === 0)
      $(this).fadeIn(2000 * (i + 1));
    else
      $(this).delay(2000 * i).fadeIn(2000 * i);
  });
});
＆＃13; 
.product {
  display: none;
}
＆＃13; 
<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=" 					ZOTAC GeForce GTX 1080 AMP! Edition ZT-P10800C-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	67,999/-
        	</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=" 					ZOTAC GeForce GTX 1070 AMP! Extreme Edition 8GB ZT-P10700B-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	28,500/-
        	</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=" 					ZOTAC GeForce GTX 1080 AMP! Extreme Edition ZT-P10800B-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	37,000/-
        	</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=" 					ZOTAC GeForce GTX 1070 AMP! Edition ZT-P10700C-10P 				" />
      </div>
      <div class="panel-footer fc-col-footer">
        <span class="price">Rs.
        	28,000/-
        	</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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题