jQuery:CSS函数在动画函数后没有触发

Question

请有人解释为什么以下不起作用.这发生在相同的单击事件上,但CSS函数不是直接的,所以我不想在动画函数上使用回调,如果可能的话.

注意:动画会触发,但css不会.

            container.animate({
                left : (posLeft + slideWidth),
            });


                container.css({
                left : '-'+(itemsLength + startX)+'px',
            }); 

Answer 1

.animate不是同步的,也就是说,绝对不能保证.css在.animate(视觉上)完成后调用.所以在你的情况下,在.animate调用之后,.css会立即调用,但是内部调用left会很快覆盖该位置..animatesetInterval

根据文档,第二个参数可以是定义选项的对象,其中之一是complete

如果提供,则动画完成后将触发完整的回调函数.这对于按顺序将不同的动画串联在一起非常有用.回调不会发送任何参数,但这被设置为动画的DOM元素.如果动画了多个元素,则每个匹配的元素执行一次回调,而不是整个动画执行一次.

container.animate({
   left : (posLeft + slideWidth),
}, {
   complete: function() {
      $(this).css({ // as per doc, this is the DOM element being animated
         left : '-'+(itemsLength + startX)+'px',
      }); 
   })
});