Question

所以我就是一个完整的菜鸟......我花了一整天的时间试图找出这个代码的原因：

<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为图像设置动画。请帮忙！非常感谢你！

Answer 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);
```

Answer 2

jenkins

你确定走对了路吗？

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

Answer 3

尝试一下..不要在操作和值之间留出空间[＆＃34; + = 500＆＃34;]

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

$(document).ready(function() {

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

});

Answer 4

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

对于你的问题，你想要点击右边的动画吗？我不是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 code）

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

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

希望它回答你的问题。

JQUERY：在点击按钮时无法设置图像动画

4 个答案: