Javascript如何在这个动画上使用while循环？答案

【问题标题】：Javascript how do I use a while loop on this animation?Javascript如何在这个动画上使用while循环？
【发布时间】：2021-04-20 04:53:20
【问题描述】：

我已经使用 javascript 几天了，但我目前在循环/使用切换此动画时卡住了。

基本上程序会在移动 3 次后“升级”为新的彩色图像，并从头开始。到目前为止，我已经升级了黄金级别，但我想继续更改颜色以进行下一个级别的升级。我正在尝试向动画图像添加一个新的类列表，每个计数器都不同，但似乎没有任何效果。我就是这样：

$("#go").click(function() {
  var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100;
  
  if (dest < 400) {
    $("#block").animate({
      marginLeft: dest + "px"
    }, 700);
  } else {
      
    $("#block").animate({
      marginLeft:  "10px"
    }, 100);
    //if counter = 1
    document.getElementById('block').classList.add("gold")
    //if counter = 2
    //document.getElementById('block').classList.remove("gold")
    //document.getElementById('block').classList.add("pink")
       //... etc
    
    //counter += 1 
  }
});

这里是运行程序的链接（点击运行文本） http://jsfiddle.net/mept9g1u/

希望有人能帮忙！

【问题讨论】：

标签： javascript jquery css widget jquery-animate

【解决方案1】：

您需要将counter 变量初始化为点击事件侦听器外部的0，否则每次点击时它都会重置为0。

var counter = 0 // ⭐️ Declare counter here

$("#go").click(function() {
  var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100;

  if (dest < 400) {
    $("#block").animate({ marginLeft: dest + "px" }, 700);
  } else {
    $("#block").animate({ marginLeft:  "10px" }, 100);

    counter++;

    if (counter === 1) {
        document.getElementById('block').classList.add("gold")
    }
    if (counter === 2) {
      document.getElementById('block').classList.remove("gold")
      document.getElementById('block').classList.add("pink")
    }
    // etc.
  }
});

【讨论】：

【解决方案2】：

$(document).ready(function(){
    function BoxAnimate(){
    var count= 0;
        while( count < 6){
            $(".boxanimate").eq(count).stop(true, true).delay(1000*count).animate({
                left:"400px"
            });
            count++;
        }
    }

    BoxAnimate();
});

.boxanimate { background:Green; 
        margin-bottom:10px;
        margin-left:30px;
        height:150px; 
        width:150px;
        font-family:Arial;
        font-size:30px;
        text-align:center;
        color:#fff;
        line-height:150px;
        position:relative;
        clear:both;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ani-wrp">
        <div class="boxanimate"> data1 </div>
        <div class="boxanimate"> data2 </div>
        <div class="boxanimate"> data3 </div>
        <div class="boxanimate"> data4 </div>
        <div class="boxanimate"> data5 </div>
        
</div>

【讨论】：