JQUERY: Trouble animating image on button click

Question

So I'm a complete noob at this...I've spent the whole day trying to figure out why this code:

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

});

is not working the way I want it to. I want to use JQuery to animate the image after clicking the button. Please help! Thank you so much!

Answer 1

. Denotes targeting an element by a class, # denotes targeting an element by its id.

• clickCats is the name, whereas you are targeting a class, add the appropriate class:

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

  or, if you can't change the markup, you can use an attribute selector (much slower):

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

• meow is the id, not the class, so target an id:

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

• Lose the space when adding/subtracting values in jQuery:

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

Answer 2

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

});

Are you sure walking the right way ?

Stop gif first, then loop it : How to stop an animated gif from looping

Answer 3

Try this out.. Do not give space between the opernads and value [ "+=500"]

JS FIDDLE link : http://jsfiddle.net/tvp48g01/6/

$(document).ready(function() {

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

});

Answer 4

To complete Georges answer, this code raises a JavaScript issue. When trying (in localhost of course) and see that behaviour is not as expect, look at browser console (e.g. Ctrl+Shift+J on Google Chrome & Mozilla). You will see something that leads to Georges' answer.

For your question, you want animation right after clicking right? I don't a 100% jQuery code but a workaround like this:

myfile.htm (make sure you have added jQuery in your header)

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

The code means that when clicking on the object whose "id" is "moveUrBody", you actually change all pictures, in the div#meow, from a png (static picture) to a gif (dynamic picture). It will looks like you made move your cat. To stop your cat, you simply need a button to change a "src" to the png picture.

Hope it answser your question.