jquery - How to have a css element with transitions except initially? -

if have css style following:

.transition {     transition: left linear .4s;     -moz-transition: left linear .4s;     -o-transition: left linear .4s;     -webkit-transition: left linear .4s; } 

and following html:

<div id="mydiv">test</div> 

and following jquery:

$(function () {     $('#mydiv').css('left', '50px');     $('#mydiv').addclass('transition'); }); 

then there still transition 0px 50px when page loads, despite fact transition class not added mydiv until after css left property set in jquery.

i able set initial css left property of mydiv when page loads (it calculated based on various parameters) , not animated, yet still have transition property set after initial page load (moving mydiv after page loads should animated).

how can accomplish this?

you apply position on dom ready, , transition on page load. try out this fiddle.

$(function () {     $('#mydiv').css('left', '50px'); });  $(window).load(function(){     $('#mydiv').css('left', '100px');     $('#mydiv').addclass('transition'); }); 

you need have separation between applying 2 styles. accomplish same effect settimeout.