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 });

帮助我Obi-Wan Kenobi，你是我唯一的希望。：（

Answer 1

我希望这就是你所需要的。这是一个非常草率的方法。如果你找到其他方法，请避免使用它。

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

Answer 2

哦，我的天哪，我讨厌这是什么蠢事......

我在我的css课堂上有这个动画：

transition: all 1.5s ease-in-out;

它覆盖了我的jQuery动画......删除它并修复它！：P

jQuery动画持续时间就像一个延迟

2 个答案: