javascript - JQuery CSS 动画

Question

我无法让这个动画正常工作。

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

我将 div 向左滑动 470px，跳到 620px 并向左滑动另一个 470px。 $(this).css({ "marginLeft": "620px"似乎不起作用。

初始 margin-left 为 150px。运行脚本后它是-790px。 (150-470-470)。

Answer 1

首先，你有语法错误:

$("#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");

演示:http://jsfiddle.net/mattball/j7rcr/