javascript - 面板不会使用 jquery 滑出

Question

我正在尝试让灰色面板滑出。我希望在其他彩色面板滑入之前单击“目标 1”或“目标 2”或“目标 3”时整个 div(灰色背景)滑出。然后当您单击“主菜单链接”时在灰色面板滑入之前，整个彩色面板应该滑出(不仅仅是闪烁)。在此处查看演示 http://jsfiddle.net/L7v0w96s/

<div class="main-menu"><a href="#target0" class="panel">Main Menu Link</a>
</div> 
<div id="right" id="main">
<div id="target0" class="panel active">This is the Target Menu<br />
    <a href="#target1" class="panel">Target 1</a><br/>
    <a href="#target2" class="panel">Target 2</a><br/>
    <a href="#target3" class="panel">Target 3</a><br/>
</div>
<div class="panel" id="target1" style="background:green">Target 1</div>
<div class="panel" id="target2" style="background:red">Target 2</div>
<div class="panel" id="target3" style="background:yellow">Target 3</div>
</div>

Answer 1

http://jsfiddle.net/L7v0w96s/7/

您太早隐藏了灰色菜单。给jquery animate添加回调函数，动画结束后隐藏

  $other.each(function(index, self) {
       var $this = $(this);
        $this.animate({
            left: $this.innerWidth()
        }, 500, function() {
            $this.removeClass('active')
        });
  });

并将您的 "width()" 更改为 "innerWidth()"。它将计算包括填充在内的宽度。