JavaScript Timing with CSS timing

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 .

Using CSS transition with JavaScript animation results in unexpected/bad effects. — Ram
– Ram, Commented Feb 9, 2014 at 7:56
@undefined that explains a lot of the strange results i had . — Writz
– Writz, Commented Feb 9, 2014 at 7:59

DA. · Accepted Answer · 2014-02-09 08:12:37Z

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/

edited Feb 9, 2014 at 8:12

answered Feb 9, 2014 at 7:56

DA.

40.8k51 gold badges162 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Writz Over a year ago

what about the transition property ? do you mean that it gets ignored ?

DA. Over a year ago

Based only on what you are showing us, it's not ignored, it just doesn't do anything. A CSS position transition needs a start position and an end position. Your CSS has neither. You are animating via jQuery instead.

DA. Over a year ago

If you want to use jQuery but animate vis CSS transition (which is a good idea as you can leverage hardware acceleration) then what you probably want to do is set up all of your animation logic in CSS classes. Then use jQuery to simple add and remove said classes to trigger all the animations.

Writz Over a year ago

sorry, I should have noted in my example that i put that line that defines its original position .

Writz Over a year ago

no , not like your example ; Which is a very good idea , i think i'm going to use it tho :)

Collectives™ on Stack Overflow

JavaScript Timing with CSS timing

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related