使用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'
    });    
});

Answer 1

Demo

根据尺寸来定位它们，询问它们的尺寸。 w / 2 + 10的公式适用于第一个元素的右边缘和第二个元素的左边缘之间恰好有10px的情况。

<p id="three">12345</p> &times; <p id="four">78910</p>

$('#three').animate({
    left:'+=' + ( $('#three').width() / 2 + 10 )
});
$('#four').animate({
    right:'+=' + ( $('#four').width() / 2 + 10 )
});    

---

它来自于此，

到此，