javascript - 一个一个展示一个产品div-6ren

javascript - 一个一个展示一个产品div

转载作者：太空宇宙更新时间：2023-11-03 22:41:54

我想做的是，我在产品 div 中一个一个地淡出。我已经使用了每个功能，但它似乎不起作用。下面是我的 fiddle 。

我必须把它一张一张地淡化。它只能通过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>

最佳答案

.each() 向回调函数传递一个索引，您可以使用该索引来定位每个 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=" 					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>

关于javascript - 一个一个展示一个产品div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43640444/

文章推荐： jquery - 如何将文本添加到加载图标 css

文章推荐： node.js - CoffeeScript编译express.static __dirname + '/public'错误

文章推荐： javascript - css 规模上的 jQueryUI slider 问题

文章推荐： node.js - 为什么 Mongo 将我的日期存储为字符串？

php - 如何过滤属于特定类别的帖子 [产品]
我需要按不同类别过滤我网站上的产品。例如，如果您选择“DRINKS”类别，它将向我显示属于该类别的产品。为了更好地解释自己。我需要按类别过滤我网站的出版物 [产品]，例如，在选择一个类别时说“饮料
c# - 获取列表中每个项目的对象集合(产品)
我有 orders 集合，其中包含 products 集合。我将一些产品 ID 作为列表传递给该方法。我需要返回与任何匹配的产品列表input 列表中的 id。我需要像这样使用 foreach 循环
Xcode 产品 -> 存档已禁用
我已经为临时分发进行存档好几个月了，但今天突然我无法这样做，因为“存档”菜单项已被禁用。我没有改变任何东西。我完成了该项目的配置设置，看起来没问题。我的临时个人资料即将在 14 天后过期。这可能是问
MYSQL:产品-属性关系
我正在尝试找出产品和产品属性之间的关系。我有一个 product 表和一个 product_attributes 表。产品可以具有多种属性。我需要查询来查找具有一个特定属性和另一个属性之一的所有产品。
mysql - 产品、类别和公司之间的数据库关系
我正在使用 MySQL Workbench 创建 EER 图。实现产品、类别和公司表之间关系的最佳方式是什么？我正在考虑这种关系，但考虑到我想让公司的客户管理自己的产品/类别，这是最好的方式吗？如
Python itertools.产品
我正在使用 itertools 包，并尝试在具有 900 个值的数组中创建 1、2 和 3 的所有可能组合，然后将其转换为 30 x 30 矩阵。我必须执行此操作的代码在下面并且工作正常。 for d
python - 我该如何着手定制夹层墨盒商店/产品？
我有几个关于 Cartridge 启动器的问题: 我的产品不需要评级或发布日期。他们永远不会出售。一些产品是可下载的，因此“num_in_stock”不相关或本质上是无限制的。没有颜色选项，只有尺寸。
MySQL:(产品)价格的首选列类型？
在 MySQL 中，存储产品价格(或一般货币)的首选列类型是什么？谷歌知道我经常使用 DECIMAL of FLOAT，但我想知道哪个更好。我存储的价格范围是 0.01 到 25.00。当然更高的值
产品、开发、测试人手一份：升级上线检查清单大全
在软件开发过程中，尤其是在准备将新功能或修复后的版本上线之前，进行详尽的自测和上线前检查是至关重要的。以下是一个从多个维度综合考量的上线升级检查清单（Checklist），旨在帮助团队确保软件质量、稳
php - 使用自定义元查询显示带有简码的 WooCommerce 产品
我正在创建一个闪购网站，并且我已经在主页和商店页面上根据日期范围显示产品。但我也想根据其他地方的日期范围显示产品，因此使用简码。这是我的代码: function testt($meta_query)
php - 以编程方式批量创建 WooCommerce 产品
可以在 WooCommerce 上批量创建产品吗？我正在使用 wp-cli Product 命令，但似乎我必须一个一个地创建。 'My product 1'), array('title'
excel - 使用自定义元动态定价规则导入 WooCommerce 产品
我有一个带有数量和价格列的 excel 文件，我用它来为插件 WooCommerce Dynamic Pricing 创建必要的输出的定价规则。我几乎想通了，但是 WooCommerce 进口商正在
wordpress - 按自定义属性对象过滤 WooCommerce 产品
我刚刚继承了一个woocommerce项目，我需要将主页更改为仅显示特定品牌。他们设置了 Product-Data => Attribute => pa_brand。如果我打印 pa_brand 数
php - 在自己的插件中获取所有 WooCommerce 产品
在插件中如何使用 wc_get_products() 获取产品。或者有其他方法可以做到吗？ if ( in_array( 'woocommerce/woocommerce.php', apply_fi
statistics - 任何用于计算文件下载和页面浏览量的 Plone 产品？
我正在做一个无法从公司网络外部访问的内部网，他们希望在 Plone 中显示一些关于文件下载和最常查看的页面的不错的统计数据。由于网络限制，我无法使用谷歌分析或任何类型的外部服务，那么是否有任何产品可
security - 产品 key 优化
我正在就以下问题寻求建议: 保留哪些产品 key 属于哪个客户端的列表。例如，如果我的产品 key 为 8456-7894-4567-7894，则应该这样设计，以便将列表写入数据库而不是文件。如何将
.net - 产品 API 的完整列表
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
php - 尝试添加搜索栏管理面板菜单栏搜索 woocommerce 产品
尝试将产品搜索栏添加到 Wordpress 管理栏后端，以进行 Woocommerce 产品搜索。它将位于后端管理菜单栏的顶部，这样无论您在后端的哪个位置，都可以搜索 woo 的产品。我很接近但在小绊
wordpress - 根据属性查询 WooCommerce 产品
这让我抓狂.. 我正在尝试根据特定属性查询和输出 WooCommerce 产品。例如，我设置了一个名为 on 的属性，可能的值为 yes或 no . 我使用以下查询: $args = array(
json - 获取所有 Shopify 产品
我正在尝试从 Shopify 商店获取所有产品的 JSON。我一直在向 {STORE URL}/products.json 端点。但这最终只显示了商店提供的部分产品(很多，但不是全部)。当我将参数更改

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 一个一个展示一个产品div