使用jquery切换（）animate（）

这是一个非常简单的问题。 我基本上知道我想要什么，怎么做，我很不确定哪个选择器在某个部分使用。 如果我拿走toggle（）函数，动画工作正常，但它只能打开菜单，而不是关闭它。

这是我的jquery代码

$(document).ready(function(){ $('#menu_button').click(function(){ $(????).toggle(function(){ $('.sidebar_menu').animate({left:'0'}, 'slow'); $('.wrapper').animate({'margin-left':'250px'}, 'slow'); }); }) }); 

这是我的页面代码：

 
 
Menu
 
1. Escolher produto
 
 
Entradas
 
Peixe
 
Saladas
 
 
2. Preencher dados
 
3. Finalizar pedido
 
 
 
 menu 
  

而我的CSS：

 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /**MAIN STYLES**/ body { height: 100%; width: 100%; background-color:#C00; } .sidebar_menu { width: 25%; height: 100%; display:block; position:fixed; left: 0; top: 0; background-color: #666; } .wrapper { width: 75%; float:left; margin-left: 25%; background-color:#C00; } .menu_button { display:none; } .slideIn { background-color: #090; } @media screen and (max-width: 50em){ .sidebar_menu { width: 250px; left: -250px; } .wrapper { width: 100%; margin-left: 0; } #menu_button { display:block; } } 

Answer 1

这是一个正常工作代码的小提琴： http ： //jsfiddle.net/6zg7K/1/

你需要添加$('.sidebar_menu').animate({'left':(state ? -250: 0)}, 'slow'); 到adeneo提供的代码，所以你的整个function将是：

 $('#menu_button').on('click', function(){ var state = parseInt($('.wrapper').css('margin-left'),10) > 200; $('.sidebar_menu').animate({'left':(state ? -250: 0)}, 'slow'); $('.wrapper').animate({'margin-left': (state ? 0 : 250)}, 'slow'); }); 

此代码是adeneo的修改版本。 代码的所有功劳归于他。

Answer 2

您必须根据元素左边距创建某种切换function：

 $(document).ready(function(){ $('#menu_button').on('click', function(){ var state = parseInt($('.wrapper').css('margin-left'),10) > 200; $('.sidebar_menu').animate({left:'0'}, 'slow'); $('.wrapper').animate({'margin-left': (state ? 0 : 250)}, 'slow'); }); }); 

小提琴