45

I have a div absolutely positioned at top: 0px and right: 0px, and I would like to use jquery's .animate() to animate it from it's current position to left: 0px. How does one do this? I can't seem to get this to work:

$("#coolDiv").animate({"left":"0px"}, "slow");

Why doesn't this work and how does one accomplish what I am looking to do?

Thanks!!

Alex
  • 64,178
  • 48
  • 151
  • 180

5 Answers5

55

I think the reason it doesn't work has something to do with the fact that you have the right position set, but not the left.

If you manually set the left to the current position, it seems to go:

Live example: http://jsfiddle.net/XqqtN/

var left = $('#coolDiv').offset().left;  // Get the calculated left position

$("#coolDiv").css({left:left})  // Set the left to its calculated position
             .animate({"left":"0px"}, "slow");

EDIT:

Appears as though Firefox behaves as expected because its calculated left position is available as the correct value in pixels, whereas Webkit based browsers, and apparently IE, return a value of auto for the left position.

Because auto is not a starting position for an animation, the animation effectively runs from 0 to 0. Not very interesting to watch. :o)

Setting the left position manually before the animate as above fixes the issue.

If you don't like cluttering the landscape with variables, here's a nice version of the same thing that obviates the need for a variable:

$("#coolDiv").css('left', function(){ return $(this).offset().left; })
             .animate({"left":"0px"}, "slow");    ​
user113716
  • 318,772
  • 63
  • 451
  • 440
  • In my reading of the jQuery source http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js , for position determination jQuery already normalizes an elements position to "top" and "left" relative "under the hood" - I believe your answer is incorrect. For example, my example works despite the css value being set for right, and the animate value being set to left. – artlung Jun 15 '10 at 02:29
  • @artlung - Thanks for the link, but in which browser did you test? I'm testing in Safari, and the animation does not work without setting the left position. It jumps directly to left, presumably as a result of the initial value of left being `auto`. – user113716 Jun 15 '10 at 02:39
  • Tested in Firefox and worked great. Peculiar, Chrome and Safari do behave as you indicated. So it's doing the /change/ to the correct position, but it's not showing the interim fx! Adding jQueryUI (which supposedly allows animating additional things normal jQuery can't) makes no change for Chrome and Safari. – artlung Jun 15 '10 at 02:52
  • @artlung - Just did my own testing too, with the same result. Firefox is perfect, but Webkit and IE7 & 8 need the left position set. (Took me so long because IE was freaking out on me. Big surprise.) – user113716 Jun 15 '10 at 02:56
  • @artlung - Indeed, if I log the `left` position with `$('#coolDiv').css('left');` before the animation, Firefox gives me the calculated position in pixels, whereas Webkit browsers give me `auto`. – user113716 Jun 15 '10 at 03:04
  • Updated my answer, to choose a "right" value to animate to. Frustrating that FF handles it differently than the WebKit twins! – artlung Jun 15 '10 at 03:08
  • Chose this answer because it was clearer to understand and consice. Thanks. – Alex Jun 15 '10 at 06:20
  • This worked for me : $("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow"); – Abhishek Goel May 15 '14 at 09:03
8

This worked for me 

$("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
Abhishek Goel
  • 18,785
  • 11
  • 87
  • 65
5

Here's a minimal answer that shows your example working:

<html>
<head>
<title>hello.world.animate()</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    type="text/javascript"></script>
<style type="text/css">
#coolDiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // this way works fine for Firefox, but 
    // Chrome and Safari can't do it.
    $("#coolDiv").animate({'left':0}, "slow");
    // So basically if you *start* with a right position
    // then stick to animating to another right position
    // to do that, get the window width minus the width of your div:
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow');
    // sorry that's so ugly!
});
</script>
</head>
<body>
    <div style="" id="coolDiv">HELLO</div>
</body>
</html>

Original Answer:

You have:

$("#coolDiv").animate({"left":"0px", "slow");

Corrected:

$("#coolDiv").animate({"left":"0px"}, "slow");

Documentation: http://api.jquery.com/animate/

artlung
  • 33,305
  • 16
  • 69
  • 121
1

so the .animate method works only if you have given a position attribute to an element, if not it didn't move?

for example i've seen that if i declare the div but i declare nothing in the css, it does not assume his default position and it does not move it into the page, even if i declare property margin: x w y z;

Alessandro Violante
  • 57
  • 1
  • 1
  • 10
1

If you know the width of the child element you are animating, you can use and animate a margin offset as well. For example, this will animate from left:0 to right:0

CSS:

.parent{
width:100%;
position:relative;
}

#itemToMove{
position:absolute;
width:150px;
right:100%;
margin-right:-150px;
}

Javascript:

$( "#itemToMove" ).animate({
"margin-right": "0",
"right": "0"
}, 1000 );
Colin R. Turner
  • 1,323
  • 15
  • 24