JQUERY：按鈕故障動畫圖片的點擊

Question

所以我在這一個完整的小白......我花了一整天試圖找出爲什麼這個代碼：

http://jsfiddle.net/thm793yn/

<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

嘗試了這一點..不要給opernads和值[ 「+ = 500」]

JS FIDDLE鏈路之間的空間：http://jsfiddle.net/tvp48g01/6/

$(document).ready(function() { 

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

}); 

Answer 2

.表示按類定位元素，#表示定位元素的定位元素爲id。

• clickCats這個名字，而你的目標類，添加相應的類：

  <button class="clickCats" name="clickCats">Cat</button> 
  

  ，或者，如果你不能改變的標記，你可以使用屬性選擇器（much slower ）：

  $("[name='clickCats']").click(function() { 
  

• meow是id，而不是class，所以靶向ID：

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

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

}); 

你肯定走正道：

$("#meow").animate(... 

添加/ jQuery中減去值時，失去了空間？

停止GIF第一，然後循環它：How to stop an animated gif from looping

Answer 4

要完成喬治的回答，此代碼引發了JavaScript問題。當嘗試（當然是在本地主機上）並且看到這種行爲不符合預期時，請查看瀏覽器控制檯（例如，Chrome Chrome上的Ctrl + Shift + J & Mozilla）。你會看到一些導致喬治答案的東西。

對於你的問題，你想單擊右鍵後動畫？我不是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圖片。

希望它回答你的問題。