JQUERY：按钮单击时无法动画图像答案

【问题标题】：JQUERY: Trouble animating image on button clickJQUERY：按钮单击时无法动画图像
【发布时间】：2015-06-05 18:23:17
【问题描述】：

所以我在这方面完全是个菜鸟......我花了一整天的时间试图弄清楚为什么这个代码：

<div id="buttons">
<button name="clickCats">Cat</button>
</div>
<section id="graphics">
 <div id="meow">
 </div>
</section>

$(document).ready(function() {

    $(".clickCats").click(function() {
    $(".meow").animate({left: "+= 500"}, 500);
    });

});

没有按照我想要的方式工作。单击按钮后，我想使用 JQuery 为图像设置动画。请帮忙！非常感谢！

【问题讨论】：

标签： jquery

【解决方案1】：

.表示以类为目标，#表示以id为目标。

clickCats 是名称，而您的目标是一个类，请添加适当的类：
```
<button class="clickCats" name="clickCats">Cat</button>
```
或者，如果您无法更改标记，则可以使用属性选择器 (much slower)：
```
$("[name='clickCats']").click(function() {
```
meow 是 id，而不是 class，所以定位一个 id：
```
$("#meow").animate(...
```
在 jQuery 中添加/减去值时丢失空格：
```
$("#meow")..animate({left: "+=500"}, 500);
```

【讨论】：

【解决方案2】：

试试这个。不要在操作数和值之间留出空格 [ "+=500"]

JS FIDDLE 链接：http://jsfiddle.net/tvp48g01/6/

$(document).ready(function() {

$(".clickCats").click(function() {
    $(".meow").animate({left: "+=500"}, 500);
});

});

【讨论】：

非常感谢！！我知道我可能犯了一个愚蠢的错误，现在我觉得更愚蠢了哈哈谢谢你！ :)

【解决方案3】：

<div id="buttons">
<button name="clickCats">Cat</button>
</div>
<section id="graphics">
 <div id="meow">
 </div>
</section>

$(document).ready(function() {

    $("**#**clickCats").click(function() {
    $("**#**meow").animate({left: "+= 500"}, 500);
    });

});

你确定走对了路吗？

先停止 gif，然后循环它：How to stop an animated gif from looping

【讨论】：

【解决方案4】：

为了完成 Georges 的回答，此代码引发了一个 JavaScript 问题。当尝试（当然是在 localhost 中）并看到行为不符合预期时，请查看浏览器控制台（例如 Google Chrome 和 Mozilla 上的 Ctrl+Shift+J）。您会看到一些导致 Georges 回答的内容。

对于您的问题，您想要在单击右键后立即播放动画吗？我不是 100% 的 jQuery 代码，而是这样的解决方法：

myfile.htm（确保您在标题中添加了 jQuery）

<div id="buttons">
  <button id="moveUrBody">Cat</button>
</div>
<section id="graphics">
 <div id="meow">
   <img src="{pathToPicture}/myStoppingCat.png" />
 </div>
</section>

myfile.js（jQuery 代码）

$(document).ready(function() {
  $("#moveUrBody").click(function() {
    $("div#meow img").attr("src") = "{pathToPicture}/myMovingCate.gif";
  });
});

代码的意思是，当点击“id”为“moveUrBody”的对象时，实际上将div#meow中的所有图片从png（静态图片）更改为gif（动态图片）。看起来你已经移动了你的猫。要阻止您的猫，您只需一个按钮即可将“src”更改为 png 图片。

希望它能回答你的问题。

【讨论】：