Javascript jquery滑动切换两个单独的元素和一个单击事件
尝试在单击事件时滑动切换两个单独的元素。有点工作,但一个元素没有动画,我有问题使动画顺利 CSSJavascript jquery滑动切换两个单独的元素和一个单击事件,javascript,jquery,Javascript,Jquery,尝试在单击事件时滑动切换两个单独的元素。有点工作,但一个元素没有动画,我有问题使动画顺利 CSS .wrapper { width: 300px; margin: 10px auto; height: 300px; background-color: #e5e5e5; border: 1px solid #d8d8d8; position: relative; } .menu { list-style: none; margin: 0; paddin
.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>
小提琴
注释
我尝试过设置toggleClass的动画,但是它是从左边而不是右边来的
扩展时,菜单按钮应位于菜单内
我猜你想要
如果你真的想把按钮放在菜单的顶端,你可以像这样做
你是这样尝试的吗?是的,但按钮必须与菜单的左侧齐平,所以我必须使用left:38%,然后从左侧设置动画(如上所述),为moveButton提供62%,这是较大的div将占用的空间。
$('.menu').stop().toggle(effect, options, duration);
$(this).toggleClass('moveButton'); });
$('a').click(function () {
var effect = 'slide';
var options = {
direction: 'right'
}
var duration = 200;
if ($('.menu').is(":hidden")) {
$(this).animate({
right: "62%"
}, duration);
} else {
$(this).animate({
right: "5%"
}, duration);
}
$('.menu').stop().toggle(effect, options, duration);
});
$('a').click(function () {
var effect = 'slide';
var options = {
direction: 'right'
}
var duration = 200;
if ($('.menu').is(":hidden")) {
var w = $(this).parent().width()*0.62 - $(this).width();
$(this).animate({
right: w
}, duration);
} else {
$(this).animate({
right: "5%"
}, duration);
}
$('.menu').stop().toggle(effect, options, duration);
});