私がしようとしているのは、製品部門に1つずつフェージングしていることです。私は各機能を使用していますが、機能していないようです。以下は私のバイブルです。1つ1つの製品部門を表示
私はそれを一つずつ色褪せる必要があります。それは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>
:その後、遅延やフェードアウトを使用して、あなたはあなたの要素の外観をずらすする秒数とそのインデックスを使用することができますか?後続の各divが前の処理を待つか、タイミングに関して何らかのオーバーラップがあるかどうかを確認しますか? – j08691
Yess!私は前に終了したい、次に次のものを – Alen