jQuery :相邻浮动Div的动画宽度

Question

我正在玩一个小小的jquery动画，并试图达到一个非常具体的效果。

如果有人还记得他们所称的带有窗格或“刀片”的旧Xbox菜单，我将使用一系列左浮动的div进行类似的操作。当页面加载时，一个窗格处于活动状态并具有很大的宽度，显示一些信息等，而其他窗格则压缩为非常小的宽度。当单击较小的窗格时，活动窗格缩小到狭窄的宽度，单击的窗格展开以显示内容。

本质上，HTML看起来如下所示：

 <div class="pane active">
</div>

<div class="pane">
</div>

<div class="pane">
</div>

我目前使用javascript (jquery)根据窗口大小定义所有宽度，这样窗格就可以填充整个屏幕。

下面是处理收缩和扩展的基本jquery事件。

 // $active is the current wide pane
// $(this) is the clicked pane
// activeWidth is a predefined constant
$active.animate( { 'width' : '100px' }, 200 );
$(this).animate( { 'width' : activeWidth }, 200);

我遇到的唯一问题是，在这个动画中，收缩/增长似乎是从不同的时间开始的(我不确定)，并在页面的最右边创建了一个令人不快的空白空间。

是否有办法确保这两个动作同步进行？我考虑过用绝对定位来复制这个。

我在工作，所以我不能上传一个图表，但我会尝试稍后，如果它太混乱。

Answer 1

jQuery文档说动画参数中有一个回调函数。“这对于将不同的动画按顺序排列在一起是有用的。”

我不确定我100%理解您的问题，如果没有看到更多您的代码，您是否可以这样做：

$active.animate( { 'width' : '100px' }, 200, function(){
    $(this).animate( { 'width' : activeWidth }, 200);
});