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 documentation表示animate参数中有回调函数。 “这对于按顺序将不同的动画串联起来非常有用。”

我不确定我是否100％理解您的问题，并且在没有看到更多代码的情况下，您可以执行以下操作：

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

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

1 个答案: