jQuery动画持续时间像延迟一样 [英] jQuery animation duration acting like a delay

问题描述

这是我的剧本:

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秒钟之后才开始播放，然后它会在半秒内匆匆通过屏幕.

For some reason, the animation for REDCAR and GREENCAR is not starting until AFTER the 5 seconds, then it hurries across the screen in about half a second.

我尝试过:

    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，您是我唯一的希望. :(

Help me Obi-Wan Kenobi, you're my only hope. :(

推荐答案

我的天哪，我讨厌这很愚蠢……

Oh my gosh, I hate when it's something stupid...

在我正在制作动画的类的CSS中，我遇到了这个问题:

I had this in my css on the class I was animating:

transition: all 1.5s ease-in-out;

它覆盖了我的jQuery动画...删除它，它是固定的！ :P

And it was overriding my jQuery animation... Remove it and it's fixed! :P

这篇关于jQuery动画持续时间像延迟一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！