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

Answer 1

演示

要根据它们的大小定位它们，请询问它们的大小。我的公式适用于第一个元素的右边缘和第二个元素的左边缘之间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 )
});    

---

从此，

对此，