重新启动动画循环Javascript / JQuery后如何用新图像更新图像

Question

我最近创建了我的第一个 Javascript 程序。我对此非常陌生（大约 3 天），并且真的很想得到一些帮助，因为我完全不知道下一步该做什么。截至目前，我打算将程序功能如下：

目的：作为比特/捐赠目标的 streamlabs 小部件

一只兔子在屏幕另一端慢慢走向终点，每次捐赠几英寸。到达终点线后，它又从头开始，升级为不同的颜色或图像，重复，不断升级等等。

我已完成所有动画、每次捐赠的运动，并重置回原始兔子并重复，但我无法将图像或颜色从方块（即兔子）更改为金色（金色兔子）和每次升级都会改变（点击屏幕末尾并重新启动后）。

我已经设置并工作了一个事件监听器，为此我添加了一个运行按钮来与移动兔子进行交互。

奖金 后来我想在每个动画之后让兔子有对话。大概是“20% 完成！”或“几乎完成！”

我可以向一些 Javascript 专家寻求帮助吗？我该怎么做呢？谢谢

$("#go").click(function() {
  var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100;
  if (dest < 700) {
    $("#block").animate({
      marginLeft: dest + "px"
    }, 700);
  } else {

    $("#block").animate({
      marginLeft: "10px"
    }, 100);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  #block {
    position: relative;
    left: 50px;
    width: 120px;
  }
  
  #go {
    position: fixed;
  }
  
  #gold {
    position: relative;
    left: 50px;
    -webkit-filter: sepia(100%);
    width: 120px;
  }
</style>
<img id="block" src="https://media.giphy.com/media/26AHz1avXH7VGg6nm/giphy.gif" />

<div id="go">&raquo; Run</div>

<gold id="gold" src="https://media.giphy.com/media/26AHz1avXH7VGg6nm/giphy.gif" />

程序链接（点击运行文本移动图片）

http://jsfiddle.net/svr1nmd3/4/

Answer 1

如果你想使用你在代码中设置的 css 类，你必须在 else 条件的末尾添加这个代码：

document.getElementById('block').classList.add("gold")

并将 css 中的 #gold 替换为 .gold。

如果你想在兔子在起点返回时更改图像，请在其他条件中添加此代码。

document.getElementById('block').src = "https://media.giphy.com/media/2yzGhPePXTXpJe9pMm/giphy.gif"

但你必须有金兔子的 gif。

let counter = -1;

$("#go").click(function() {

    const maxMarginRight = 300; // just to reduse the width of block for fast try
  var dest = parseInt($("#block").css("margin-left").replace("px", "")) + 100;
  
  const colorIndex = ['gold', 'red', 'blue', 'green', 'black']
  
  if (dest < maxMarginRight) {
    $("#block").animate({
      marginLeft: dest + "px"
    }, maxMarginRight);
  } else {
  
    counter++;
  
    $("#block").animate({
      marginLeft: "10px"
    }, 100);
    
    if (colorIndex.length > counter) {
        const nextColor = colorIndex[counter];
      const prevColor = colorIndex[counter - 1];
      
      // Here I add the class gold at bunny
      if (nextColor) document.getElementById('block').classList.add(nextColor);     
      if (prevColor) document.getElementById('block').classList.remove(prevColor);
    }
   
    
  }
});

#block {
  position: relative;
  left: 50px;
  width: 120px;

}

#go {
  position: fixed;
}

/* #gold use the id of elemement to set the style, .gold is a class and you can add/remove it from element */
.gold {
  position: relative;
  left: 50px;
  -webkit-filter: sepia(100%);
  width: 120px;
}

.red {
  -webkit-filter: invert(40%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(400%) contrast(2);
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
}

.blue {
  -webkit-filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
  filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
}

.green {
  -webkit-filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
}

.black {
  -webkit-filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
  filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<img id="block" src="https://media.giphy.com/media/26AHz1avXH7VGg6nm/giphy.gif" />
<div id="go">&raquo; Run</div>