[英]jquery slidetoggle two seperate elements with 1 click event
Trying to slide toggle two separate elements on 1 click event. 尝试在1次单击事件上滑动切换两个单独的元素。 Got it somewhat working however the one element is not animated and I'm having issues making the animation smooth 得到它有点工作但是一个元素没有动画,我有问题使动画流畅
CSS 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 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 jQuery的
$('a').click(function() { var effect = 'slide'; var options = { direction: 'right' } var duration = 200; $('a')。click(function(){var effect ='slide'; var options = {direction:'right'} var duration = 200;
$('.menu').stop().toggle(effect, options, duration); $(this).toggleClass('moveButton'); });
Fiddle http://jsfiddle.net/NZ2DX/ 小提琴 http://jsfiddle.net/NZ2DX/
NOTES Ive tried animating the toggleClass but it comes in from the left instead of the right 注意我已尝试动画化toggleClass但它从左侧而不是右侧进入
Menu button should be inside menu on expansion 扩展时菜单按钮应位于菜单内部
I am guessing you want this . 我猜你想要这个 。
$('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);
});
If you really want the button to sit on top of your menu, you can do it like this . 如果你真的想要的按钮,坐在你的菜单顶部,你能做到像这样 。
$('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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.