Crossfader elements without resorting to position: absolute

Question

I am trying to cross out two elements so that one replaces the other. Obviously, the input element must be placed in the DOM before it fades out. Without absolute positioning, it moves other elements inappropriately, which I should avoid.

Here is a scenario of current behavior. I need medium crossfade drawers without the ugly movement effect. Perhaps I could wrap them in another container and completely place them in it, but is there a more elegant way?

http://jsfiddle.net/b9yKE/

HTML:

<ul> <li id="one">One</li> <li id="two">Two</li> <li id="three">Three</li> </ul> 

CSS

 li { display: inline-block; width:60px; border: 1px solid; text-align: center; } .animate-opac { -webkit-transition: opacity 1.5s ease-out; } .fade { opacity: 0; } .hidden { display:none; } 

JS:

 var $new = $('<li id="twohalf">2.5</li>'); var $ul = $('ul'); window.setTimeout(function() { $('#two').toggleClass("animate-opac"); $new.toggleClass("animate-opac fade"); $('#two').after($new); $('body')[0].offsetWidth; $('#two').toggleClass("fade"); $new.toggleClass("fade"); $('#two').on("webkitTransitionEnd", function() { $(this).remove(); }); }, 500); 

Answer 1

just replace the item with a new one in the transition callback http://jsfiddle.net/b9yKE/4/

 $('#two').toggleClass("animate-opac fade").one("webkitTransitionEnd", function() { $(this).replaceWith( $new ); });