jQuery动画持续时间表现为延迟

Question

这是我的剧本：

greenGoButton.click(function() {
    $(".road-animate").css("-webkit-animation-play-state", "running");
    $(".buildings-animate").css("-webkit-animation-play-state", "running");
    road.addClass('road-animate');
    buildings.addClass('buildings-animate');

//THIS IS WHAT IS DELAYING

    redCar.animate({ left: 1000 }, 5000);
    greenCar.animate({ left: 1000 }, 5000);

//END of what I'm asking about :)

    infoScreen.toggleClass('screen-two screen-three');
    setTimeout(function() {screenTransition(2)} ,1500);
});

出于某种原因，REDCAR和GREENCAR的动画直到5秒后才开始，然后它在大约半秒钟内在屏幕上匆匆通过。

我试过：

    redCar.stop().animate({ left: 1000 }, 5000);
    greenCar.stop().animate({ left: 1000 }, 5000);

以及：

    redCar.animate({ left: travelDistance }, { duration: 5000, queue: false });
    greenCar.animate({ left: travelDistance }, { duration: 5000, queue: false });

以及：

    redCar.stop().animate({ left: travelDistance }, { duration: 5000, queue: false });
    greenCar.stop().animate({ left: travelDistance }, { duration: 5000, queue: false });

帮帮我欧比万克诺比，你是我唯一的希望。:(

Answer 1

天哪，我讨厌做傻事.

在我动画的课堂上，我的css中有这样的内容：

transition: all 1.5s ease-in-out;

它覆盖了我的jQuery动画..。移开它，它就修好了！:P

Answer 2

我希望这是一个非常草率的方法，如果您找到其他方法的话，need.This会使用它。

for(i=0;i<5;i++)
{
   redCar.stop().animate({ left:+200 }, 1000); 
}