jquery切换从左到右滑动
我在页面的左侧有一个“菜单”按钮，一旦选中我有一个包含菜单项显示的div。 然后我有另一个按钮可以选择隐藏菜单。
理想情况下，我希望将其滑出（从左到右）并向后滑动，但未能成功地使其正常工作。 我已经尝试过使用animate和SlideToggle但是没有一个能用于我拥有的东西。 有小费吗？
Menu Menu $('#cat_icon').click(function () { $('#categories').toggle(); $('#cat_icon').hide(); }); $('.panel_title').click(function () { $('#categories').toggle(); $('#cat_icon').show(); });
见： 演示
$('#cat_icon,.panel_title').click(function () { $('#categories,#cat_icon').stop().slideToggle('slow'); });
更新：从左向右滑动： Demo2
注意 ：第二个也使用jquery-ui
最初隐藏#categories
#categories { display: none; }
然后，使用JQuery UI，慢慢地为Menu设置动画
var duration = 'slow'; $('#cat_icon').click(function () { $('#cat_icon').hide(duration, function() { $('#categories').show('slide', {direction: 'left'}, duration);}); }); $('.panel_title').click(function () { $('#categories').hide('slide', {direction: 'left'}, duration, function() { $('#cat_icon').show(duration);}); });
的jsfiddle
您也可以在几毫秒内使用任何时间
var duration = 2000;
如果你想隐藏在class='panel_item' ，请同时选择panel_title和panel_item
$('.panel_title,.panel_item').click(function () { $('#categories').hide('slide', {direction: 'left'}, duration, function() { $('#cat_icon').show(duration);}); });
的jsfiddle
从右边滑动：
$('#example').animate({width:'toggle'},350);
向左滑动：
$('#example').toggle({ direction: "left" }, 1000);
用这个…
$('#cat_icon').click(function () { $('#categories').toggle("slow"); //$('#cat_icon').hide(); }); $('.panel_title').click(function () { $('#categories').toggle("slow"); //$('#cat_icon').show(); });
见这个例子
问候。