关于jq的一个问题

Question

$('.next').click(function () {
    $('ul').animate({
        'left':'300px'
    })
    $('ul').css('left', '1400px')
});

我同时设置了2次left值，为什么下面的会失效？

Answer 1

动画的执行会有时间，下面的设置并没有失效，而是被动画的效果覆盖了。如果你仔细观察，会发现，在动画的过程中，left突然变了很大，然后又变回来。如果想在动画完成后，实现一些操作，可以发在回调里。

$('.next').click(function () {
    $('ul').animate({
        'left':'300px'
    },function(){
        $('ul').css('left', '400px')
    })
});

Answer 2

因为实际上它的执行顺序是：
$('ul').css('left', '1400px')

$('ul').css('left', '300px')

但第一步瞬间完成，接下来开始动画效果的第二步，所以给你的感觉是第一步失效了。

Answer 3

刚刚试了一下，发现如果将$('ul').css('left', '1400px')放在前面两个都生效。
反过来就不行了！！！不太懂！