CODEWITHSUNDEEP
jqueryjquery-animate
lac
lac

Reputation: 775

Move centred div over to right with jquery

I have a div that is centred on the page with margin:auto.

<div id="click"></div>

When it is clicked on, I would like it slide over 100px to the left. This is the jquery I have tried but it doesn't seem to work:

$("#click").click(function(){
$(this).animate({"left":"+=100px"}, "slow");

});

This is js fiddle.

Can anyone explain to me where I am going wrong?

Upvotes: 0

Views: 53

Answers (1)

Todd Mark
Todd Mark

Reputation: 1885

Change Like This:
CSS:

#click {
position:relative;
width: 50px;
height: 50px;
background: yellow;
margin:auto;
}

Script:

$("#click").click(function(){
$(this).animate({"left":"+100px"}, "slow");
});

You should add a attribute of position: relative on the div and change the +=100px to +100px.
The reason is: a Element must have a position:relative or position:absolute to flow some position on a page.
For more information: click this. This is JSFiddle

Upvotes: 1

Related Questions