Jump to content

jQuery & HTML - Animating images


1337
 Share

Recommended Posts

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>

Link to comment
Share on other sites

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 by Mudsaf
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...