JQuery CSS Animation

Question

I am having trouble getting this animation to work.

$("#selectedTime").stop().animate({
    "margin-left": "-=470px"
},"fast", function() {
    $(this).css({ "margin-left": "620px"
})}).animate({
    "margin-left": "-=470px"
},"fast");

I am sliding the div to the left 470px, jumping to 620px and sliding another 470px to the left. $(this).css({ "marginLeft": "620px" does not seem to be working.

The initial margin-left is 150px. After running the script it is -790px. (150-470-470).

And what's the trouble you're having?

Andrew Whitaker
– Andrew Whitaker

2011-07-02 13:40:48 +00:00
Commented Jul 2, 2011 at 13:40 — Andrew Whitaker
– Andrew Whitaker, Commented Jul 2, 2011 at 13:40
-=, did u try with simply -470px?

MLS
– MLS

2011-07-02 13:43:20 +00:00
Commented Jul 2, 2011 at 13:43 — MLS
– MLS, Commented Jul 2, 2011 at 13:43
What other CSS is applied to #selectedTime?

Matt Ball
– Matt Ball

2011-07-02 13:47:19 +00:00
Commented Jul 2, 2011 at 13:47 — Matt Ball
– Matt Ball, Commented Jul 2, 2011 at 13:47

Matt Ball · Accepted Answer · 2011-07-02 14:12:15Z

1

To start, you've got syntax errors:

$("#selectedTime").stop().animate({
    "margin-left": "-=470px"
},"fast", function() {              // ↓↓↓ here 
    $(this).css({ "margin-left": "620px"}); 
}).animate({
    "margin-left": "-=470px"
},"fast");

$("#selectedTime")
    .stop()
    .animate({"margin-left": "-=470px"}, "fast")
    .animate({"margin-left": "620px"}, 0)
    .animate({"margin-left": "-=470px"}, "fast");

Demo: http://jsfiddle.net/mattball/j7rcr/

edited Jul 2, 2011 at 14:12

answered Jul 2, 2011 at 13:50

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user778604 Over a year ago

Same problem. Still ending up at -790px.

user778604 Over a year ago

Beautiful. I guess it makes sense that it should be an animation, I didn't think of setting the duration to 0 though. Thank you!!

Collectives™ on Stack Overflow

JQuery CSS Animation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related