slideToggle
过去,当我需要菜单从上到下滑动时,我设法让我的代码正常工作。但现在我需要从右向左滑动我的菜单。所以我决定采用这种.animate
方法。
我已经尝试过了,但它不能完全工作:
$(MENU_BUTTON).click(function() {
$(MENU_ID).animate({ width:'245' }, 600);
});
它确实从右向左移动,但只移动一次,然后就卡住了。另外,我也希望它可以滑入。我怎样才能做到这一点?
slideToggle
过去,当我需要菜单从上到下滑动时,我设法让我的代码正常工作。但现在我需要从右向左滑动我的菜单。所以我决定采用这种.animate
方法。
我已经尝试过了,但它不能完全工作:
$(MENU_BUTTON).click(function() {
$(MENU_ID).animate({ width:'245' }, 600);
});
它确实从右向左移动,但只移动一次,然后就卡住了。另外,我也希望它可以滑入。我怎样才能做到这一点?
所以第一次,你从左到右设置动画,下一次,你从右到右设置动画?如果我理解正确,您希望隐藏菜单,然后当按下按钮时,菜单从左到右滑动可见。下次按下按钮时,它会从右向左向后滑动。这正是代码所做的,除了隐藏菜单。
$(MENU_BUTTON).click(function() {
var right = $(MENU_ID).hasClass('right');
$(MENU_ID).toggleClass('right');
// If you would like to hide/show it too.
// Change the 0 to 0-$(MENU_ID).outerWidth();
/* if (right) {
setTimeout(function () {$(MENU_ID).hide();}, 600);
} else $(MENU_ID).show(); */
$(MENU_ID).animate({ width:(right?0:245) }, 600);
});
试试这个小提琴
HTML
<div class="menu">
<ul class="upper">
<li><a href="" title="">Dynamic item 1</a>
<ul class="inner">
<li> <a href="">Subitem 1 of 1</a>
</li>
<li> <a href="">Subitem 2 of 1</a>
</li>
</ul>
</li>
<li> <a href="">Static item</a>
</li>
<li><a href="">Dynamic item 2</a>
<ul class="inner">
<li><a href="">Subitem 1 of 2</a>
</li>
</ul>
</li>
</ul>
</div>
CSS
.menu {
width: 150px;
float: right;
position: relative;
}
.menu ul li {
margin-bottom: 1px;
}
.menu ul.upper li a {
width: 150px;
background-color: #000;
color: #FFF;
text-decoration: none;
display: block;
padding: 7px 10px;
text-align: left;
font-weight: bold;
}
.menu ul.inner {
position: absolute;
right: 160px;
z-index: 1000;
display: none;
width: 150px;
right: 170px;
}
.menu ul.inner li a {
width: 150px;
background-color: #3D6AA2;
color: #FFF;
text-decoration: none;
display: block;
padding: 7px 10px;
text-align: left;
font-weight: bold;
}
JS
$('.upper li').each(function() {
$(this).find('ul.inner').css({top: $(this).offset().top})
});
$('.upper li').hover(function () {
$(this).find('ul.inner').stop(true, true).animate({
width: "toggle"
}, {
queue: false,
duration: 250
});
});