Question

我正在尝试显示添加到购物车中的产品的简短动画。

我正在使用3个超棒的字体图标。盒子，瓶子和购物车。

我要把瓶子放在盒子旁边，然后移到购物车上，然后消失。

for (var i = 0; i < 100; i++) {
  console.log(i)
  var appendItem = "<i id='movingItem" + i + "' class='fas fa-wine-bottle' style='font-size: 2em;'></i>";
  $("#animationArea").append(appendItem);
  // div = $("#movingItem");
  // console.log(i, div)
  $("#movingItem" + i).animate({
    opacity: '0.4'
  }, "slow");
  $("#movingItem" + i).animate({
    marginLeft: '300px',
    opacity: '0.8'
  }, "slow");
  $("#movingItem" + i).animate({
    opacity: '0.4'
  }, "slow");
  $("#movingItem" + i).animate({
    marginLeft: '0px',
    opacity: '0.8'
  }, "slow");
  $("#movingItem" + i).animate({
    opacity: '0'
  }, "slow");
  // $("#movingItem"+i).hide();
}

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="testPopup" class="popup">
  <div style="width:100%;">
    <div id="animationArea" style="padding:20px 5px 20px 5px;">
      <i class="fas fa-box" style="font-size: 4em;float:left;"></i>

      <i class="fas fa-shopping-cart" style="font-size: 4em;float:right;"></i>
      <!-- <i class="fas fa-wine-bottle"></i> -->
    </div>

    <p id="loadingPhrase" style="text-align:center;"></p>
  </div>
</div>

正如您所看到的，当我运行我的代码时，所有元素都一次出现，我想要的是将项逐一追加

Answer 1

您可以使用异步方式延迟循环，检查我添加的示例。或编写适当的动画CSS。

$(document).ready(function () {
            var i=0, n= 10; intervalTime=200;
            var intervalInstance = setInterval(function(){
                console.log(i)
                var appendItem = "<i id='movingItem" + i +
                    "' class='fas fa-wine-bottle' style='font-size: 2em;'></i>";
                $("#animationArea").append(appendItem);
                // div = $("#movingItem");
                // console.log(i, div)
                $("#movingItem" + i).animate({
                    opacity: '0.4'
                }, "slow");
                $("#movingItem" + i).animate({
                    marginLeft: '300px',
                    opacity: '0.8'
                }, "slow");
                $("#movingItem" + i).animate({
                    opacity: '0.4'
                }, "slow");
                $("#movingItem" + i).animate({
                    marginLeft: '0px',
                    opacity: '0.8'
                }, "slow");
                $("#movingItem" + i).animate({
                    opacity: '0'
                }, "slow");
                if(i+1>n){
                    clearInterval(intervalInstance)
                }
                i++;
            },intervalTime);
        })

<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


 <div id="testPopup" class="popup">
        <div style="width:100%;">
            <div id="animationArea" style="padding:20px 5px 20px 5px;">
                <i class="fas fa-box" style="font-size: 4em;float:left;"></i>

                <i class="fas fa-shopping-cart" style="font-size: 4em;float:right;"></i>
                <!-- <i class="fas fa-wine-bottle"></i> -->
            </div>

            <p id="loadingPhrase" style="text-align:center;"></p>
        </div>
    </div>

for循环中的jQuery动画

1 个答案: