JQuery анимация для цикла - PullRequest
Новая
       20

JQuery анимация для цикла

0 голосов
/ 12 ноября 2018

Я пытаюсь отобразить краткую анимацию товаров, добавляемых в корзину.

Я использую 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>

Как вы видите, когда я запускаю свой код, все элементы появляются сразу, я хочу, чтобы элементы добавлялись один за другим

1 Ответ

0 голосов
/ 13 ноября 2018

Вы можете отложить цикл с асинхронным, проверьте образец, который я добавил.Или напишите соответствующую анимацию 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>
...