jQuery addClass method chaining to perform CSS transitions

Question

What I would like to do (broke):

go
         


        

Answer 1

Your transition works in case three when it calls $('div').css('left') because jQuery will call the method window.getComputedStyle (or a very similar method depending on browser compatibility issues). In a blog post by Tim Taubert (a Mozilla Employee), the trick is described:

getComputedStyle() in combination with accessing a property value actually flushes all pending style changes and forces the layout engine to compute our

’s current state.

Without forcing this layout recalculation, the recalculation is delayed until after both classes (left and left-more) are added, which will calculate its position at 400px.

Example Fiddle - using getComputedStyle and accessing .left