jQuery animation duration acting like a delay

问题

Here's my script:

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

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.

I've tried:

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

and:

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

and:

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

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

回答1:

I hope this is what you need.This is a very sloppy method .Avoid using it if you find some other method.

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

回答2:

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

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

transition: all 1.5s ease-in-out;

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

来源：https://stackoverflow.com/questions/29262000/jquery-animation-duration-acting-like-a-delay