2017-04-26 7 views
0

私がしようとしているのは、製品部門に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>

+0

:その後、遅延やフェードアウトを使用して、あなたはあなたの要素の外観をずらすする秒数とそのインデックスを使用することができますか?後続の各divが前の処理を待つか、タイミングに関して何らかのオーバーラップがあるかどうかを確認しますか? – j08691

+0

Yess!私は前に終了したい、次に次のものを – Alen

答えて

1

.each()

https://fiddle.jshell.net/yq8z15yo/は、コールバック関数は、各div要素をターゲットに使用できるインデックスを渡します。彼らはフェードインする必要がありどのように正確に

$(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>

+1

Yessこれは私が欲しかったものです。今私は 'each()'の働きも正しく学びました。 – Alen

1

あなたはとてもあなたが各項目にアクセスすることができます.eachとの配列を取得感謝。

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

これはまだすべてそれらを同時に退色させるだろう – j08691

1

使用の遅延と、このようなclass.productの配列をループ、

$(".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>

+0

努力の兄弟ありがとう。 – Alen

+0

@Alenようこそ。 –

関連する問題