[英]jquery slidetoggle two seperate elements with 1 click event
嘗試在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(effect, options, duration); $(this).toggleClass('moveButton'); });
小提琴 http://jsfiddle.net/NZ2DX/
注意我已嘗試動畫化toggleClass但它從左側而不是右側進入
擴展時菜單按鈕應位於菜單內部
我猜你想要這個 。
$('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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.