尝试在1次单击事件上滑动切换两个单独的元素 . 得到它有点工作但是一个元素没有动画,我有问题使动画流畅
CSS
.wrapper {
width: 300px; margin: 10px auto; height: 300px;
background-color: #e5e5e5;
border: 1px solid #d8d8d8;
position: relative;
}
.menu {
list-style: none; margin: 0; padding: 0; width: 62%; background-color: blue;
position: absolute; right: 0; top: 0; height: 100%; display: none; z-index: 300;
}
a {
display: block; width: 50px; height: 60px; background-color: orange;
position: absolute; right: 5%; z-index: 500;
}
.moveButton { right: auto; left: 38%; }
HTML
<div class="wrapper">
<a href="#">Menu</a>
<ul class="menu">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
jquery
$('a') . click(function(){var effect ='slide'; var options = {direction:'right'} var duration = 200; $(' . menu') . stop() . toggle(效果,选项,持续时间);
$(本).toggleClass( 'moveButton'); });
Fiddle http://jsfiddle.net/NZ2DX/
NOTES 香港专业教育学院尝试动画制作toggleClass,但它是从左边而不是右边进来的
菜单按钮应该在扩展时的内部菜单中
1 回答
我猜你想this .
如果您真的希望按钮位于菜单顶部,您可以像this那样进行操作 .