面板不會滑出使用jquery

我試圖讓灰色面板滑出。我希望整個div（灰色背景）在其他彩色面板滑入之前單擊「目標1」，「目標2」或「目標3」時滑出。然後，當您單擊「主菜單鏈接」整個彩色面板應在灰色面板幻燈片之前滑出（不只是眨眼出來）。看看這裏的演示http://jsfiddle.net/L7v0w96s/面板不會滑出使用jquery

<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>

來源

2015-05-15 kimberlyvoo

問題是當你點擊主菜單時它不會滑動？ –

單擊目標鏈接時，灰色面板應滑出。現在它只被下一個彩色滑動面板覆蓋。然後當點擊主菜單時，彩色面板應滑出，而不是消失。 – kimberlyvoo

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

你太早隱藏你的灰色菜單。添加一個回調函數jQuery的動畫和動畫結束

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

後它會被隱藏，更改"width()"到"innerWidth()"。它會計算寬度，包括填充。

來源

2015-05-15 01:52:20

謝謝！它效果很好。 – kimberlyvoo

不用客氣 –

我打算髮佈一個新問題。但是如果你知道當我點擊「主菜單鏈接」時我可以向右滑動（不是左），我真的很感謝答案。我喜歡一切，只有主菜單鏈接滑動方向。我不想改變其他鏈接的幻燈片方向。 – kimberlyvoo

面板不會滑出使用jquery

回答

相關問題