CODEWITHSUNDEEP
javascriptjquerycssanimation
user778604
user778604

Reputation: 11

JQuery CSS Animation

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).

Upvotes: 1

Views: 1241

Answers (1)

Matt Ball
Matt Ball

Reputation: 359776

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/

Upvotes: 1

Related Questions