带有CSS计时的JavaScript计时

Question

consider this CSS property:

.front{
transition: left 2s;
left : 0px;
}

and this JQuery function :

var delay = 5000;
setTimeout(function(){
$('.front').animate({left: '1300px'}, { duration: 500});
,delay} 

Now the duration is 0.5 second . Delay is set to 5 seconds . Transition timing is 2 seconds .

I have done lots of attempts to figure out who wins the war of timing, but i couldn't.

could you help me and tell me what really goes on when the script runs ?

EDIT : I added the initial position property in the css class ; forgot to add it tho .

Answer 1

Your script:

• waits for 5 seconds
• then animates the position of the element with a class of .front over a half second

Based on what your showing us, the CSS doesn't really do anything. Note that CSS transitions aren't the same as jQuery animations.

UPDATE:

An example based on my comments:

.front{
    left: 500px
    transition: left 2s;
}

.front.animate {
    left: 0px;
}

var delay = 5000;
setTimeout(function(){
    $('.front').addClass('animate');
,delay} 

Fiddle: http://jsfiddle.net/9q8sL/1/