jQuery & HTML - Animating images

[1337]

I have this script, and it is supposed to move an image down by 200 pixels. And right now, it does nothing.

I'm using a jQuery script to move it down.

 

_________________________________________________________________

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){$('button').click(function(){$('img').animate({bottom:'200px'},'slow');</script><button id="moveim"> Move creeper down.</button><div width=500px height=500px><img src='http://www.technicpack.net/img/tekkit/spacecreep.png'> </img></div>

[Mudsaf]

I have this script, and it is supposed to move an image down by 200 pixels. And right now, it does nothing.

I'm using a jQuery script to move it down.

 

_________________________________________________________________

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){$('button').click(function(){$('img').animate({bottom:'200px'},'slow');</script><button id="moveim"> Move creeper down.</button><div width=500px height=500px><img src='http://www.technicpack.net/img/tekkit/spacecreep.png'> </img></div>

 

 

Well i made code similar you had few problems there on your code. Example there is no img closing tags like </img> & div width & height entered on style attribute.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script> $(function() {$("#moveim").on('click', function() {$("img").animate({"margin-top":"200px"});});});</script><button id="moveim"> Move creeper down.</button><div style="width:500px;height:500px;"><img src='http://w3schools.invisionzone.com/public/style_images/1_logo.png'></div>

Or if you want it to move certain amount down on each click do this.

$("img").animate({"margin-top":"+=200px"});

Also i would recommend you to give and ID to image that you're moving because currently it moves all images. Lets say our image id="MyIMG" and make the function working.

$("img#MyIMG").animate({"margin-top":"+=200px"});<img id="MyIMG" src='http://w3schools.invisionzone.com/public/style_images/1_logo.png'>

Edited August 14, 2013 by Mudsaf

[davej]

http://www.w3schools.com/jquery/jquery_animate.asp

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

 

 

By default, all HTML elements have a static position, and cannot be moved.To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!