CODEWITHSUNDEEP
javascriptjqueryhtmlcssdelay
Writz
Writz

Reputation: 29

JavaScript Timing with CSS timing

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 .

Upvotes: 1

Views: 118

Answers (1)

DA.
DA.

Reputation: 40697

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/

Upvotes: 1

Related Questions