javascript - jQueryのanimate()で要素を折りたたむ

Question

インライン HTML 要素を折りたたむアニメーションを試しています (すべての要素が中央に移動します)。私がアプローチしている方法は非常に不格好で、要素の幅が変化すると機能しません。

これが私の試みです: http://jsfiddle.net/JFVxX/1/

HTML

<p id="one">1</p> &times; <p id="two">2</p>

CSS

p {
    display: inline;
    position:relative;
}

JS

$(document).ready(function() {
    $('#one').animate({
        left:'+=10'
    });
    $('#two').animate({
        right:'+=10'
    });    
});