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

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

1 个答案: