jquery - 位置に頼らずに要素をクロスフェードする: 絶対

Question

2 つの要素をクロスフェードして、一方が他方を置き換えようとしています。明らかに、表示される要素は、フェードインする前に DOM に配置する必要があります。絶対的な配置がないと、他の要素がずれてしまいます。これは避ける必要があります。

これが現在の動作のフィドルです。醜い移動効果なしでクロスフェードするには、中央のボックスが必要です。おそらく両方を別のコンテナに入れ、その中に完全に配置することもできますが、もっとエレガントな方法はありますか?

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);