Question

我正在尝试展示产品，当我应用动画时，它适用于整个div

例如

<div class="product_area">
    <div class="product">1</div>
    <div class="product">2</div>
    <div class="product">3</div>
    <div class="product">4</div>
    <div class="product">5</div>
</div>

$(document).ready(function()
{
    $(".product_area").slideUp(); //Whole div slides up.
    $(".product").slideUp(); //Just one product slides up.
}

我想要的是产品从右边逐个滑入。

Answer 1

检查出来

$(function(){
  //$(".product_area").slideUp(); //Whole div slides up.
  //$(".product").slideUp(); //Just one product slides up.
  var delay = 500
  $('.product').each(function(){
   $(this).delay(delay).toggle( "slide" );
   delay = delay+1500;
 });
});

/* Put your css in here */

.product {
  display:none;
  width:100px;
  background-color:#ccc;
  padding:15px;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
   <div class="product_area">
    <div class="product">1</div>
    <div class="product">2</div>
    <div class="product">3</div>
    <div class="product">4</div>
    <div class="product">5</div>
</div>
  </body>

</html>

如何单独为每个div设置动画

1 个答案: