jQuery - slideToggle从中间开始，向左和向右出

Question

当我按下汉堡包图标时，我希望我的导航菜单显示并从中间向左和向右移动，以便填充整个页面。

我创建了一个codepen，显示它从顶部到底部的放置时间。但我想要它做的是从中间到左侧和右侧。

我一直在试图寻找答案，但没有任何运气。

链接：http://codepen.io/anon/pen/dXvzRJ

<div class="button"></div> 
<div class="box"></div> 

.button{ 

height: 20px; 
width: 20px; 
background: #333; 
} 

.box{ 

height: 400px; 
background: #000; 
display: none; 
} 

$(document).ready(function(){ 
    $('.button').click(function(){ 
     $('.box').slideToggle('slow'); 
    }); 
}); 

Answer 1

你有这样的选择：

使用CSS

在CSS，你可以使用transition动画元素的width：

.box{ 
    height: 400px; 
    width:0; 
    margin:0 auto; 
    background: #000; 
    transition:all .6s linear; 
} 
.box.open { 
    width:100%; 
} 
$(document).ready(function(){ 
    $('.button').click(function(){ 
     $('.box').toggleClass('open'); 
    }); 
}); 

Updated Codepen

---

随着jQueryUI的

如果你能包括jQueryUI的只使用clip效果：

$(document).ready(function(){ 
    $('.button').click(function(){ 
     $('.box').toggle("clip", { direction: "horizontal" }, 1000); 
    }); 
}); 

Codepen Demo