CODEWITHSUNDEEP
jqueryhtml
user3165952
user3165952

Reputation:

My Jquery Image won't move

Hi I am working on a jquery animation. I do not have much experience with jquery, but I do know basic syntax. Here is what I got so far...

 <!DOCTYPE html>
<html>
<title>Nathan</title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<script>
$(document).ready(function(){ 
$("button").click(function(){
  $("#N").animate({left:'250px'});
  });
});
</script> 
</head>

<body>
<button>CLICK</button>
<div id="N" style="margin-left:200px;"><image src="http://upload.wikimedia.org/wikipedia/en/8/88/Letter_N-1-.png" height="44" width="44"/></div>
 <image src="http://b68389.medialib.glogster.com/media/3cf5bc6910ded698d225a3be66fb7bec27443f45eaa12ee7d207847f79152a10/bubble-graffiti-alphabet-letter-l.jpg" height="44" width="44"/>
</body>
</html>

I tried to function this: 

<div id="N" style="margin-left:200px;"><image src="http://upload.wikimedia.org/wikipedia/en/8/88/Letter_N-1-.png" height="44" width="44"/></div>

with my jquery script.

When I click the button however the image does not move.

What have I done wrong?

How could I edit the code so that it functions with my <div id="N" so it can move my image?

Upvotes: 3

Views: 377

Answers (4)

nathanleachman
nathanleachman

Reputation: 285

Try this give

position:relative

Upvotes: 1

Zword
Zword

Reputation: 6789

Give position:relative to your div with id "N":

<div id="N" style="position:relative;margin-left:200px;">

Check this Fiddle

Copy the below code directly into page and it should work:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function(){ 
$("button").click(function(){
    $("#N").animate({'left':'250px'});
  });
});
});//]]>  

</script>
</head>
<body>
  <button>CLICK</button>
<div id="N" style="position:relative;margin-left:200px;"><image src="http://upload.wikimedia.org/wikipedia/en/8/88/Letter_N-1-.png" height="44" width="44"/></div>
 <image src="http://b68389.medialib.glogster.com/media/3cf5bc6910ded698d225a3be66fb7bec27443f45eaa12ee7d207847f79152a10/bubble-graffiti-alphabet-letter-l.jpg" height="44" width="44"/>

</body>
</html>

Upvotes: 3

zedecliff
zedecliff

Reputation: 84

hehe... the solution to that is to add a plus sign 

      $("#N").animate({margin-left:'+250px'});

Upvotes: 0

j08691
j08691

Reputation: 207901

Set the position via CSS:

#N {
    position:relative;
}

jsFiddle example

Upvotes: 0

Related Questions