jquery从左到右切换幻灯片

我有一个“菜单”按钮在页面的左侧，一旦选择我有一个包含菜单项显示的div。然后我有另一个可以选择隐藏菜单的按钮。jquery从左到右切换幻灯片

理想情况下，我希望这从（从左到右）滑出并返回，但一直没有成功，让这项工作很好。我尝试过使用动画和SlideToggle，但没有一个适合我的工作。有小费吗？

<div id="cat_icon">Menu</div> 
<div id="categories"> 
    <div CLASS="panel_title">Menu</div> 
    <div CLASS="panel_item"> 
     <template:UserControl id="ucCategories" src="UserControls/ProductCategories.ascx" /> 
    </div> 
</div>

$('#cat_icon').click(function() { 
    $('#categories').toggle(); 
    $('#cat_icon').hide(); 
}); 
$('.panel_title').click(function() { 
    $('#categories').toggle(); 
    $('#cat_icon').show(); 
});

来源

2013-01-21 LeeTee

下面是关于如何HTTP滑动一个很好的教程： //www.learningjquery.com/2009/02/slide-elements-in-different-directions – Pete

点击#cat_icon将同时隐藏（使用toggle（））#categories和#cat_icon本身，这是预期的行为吗？ –

看到这个：Demo

$('#cat_icon,.panel_title').click(function() { 
    $('#categories,#cat_icon').stop().slideToggle('slow'); 
});

更新：从左至右滑动：Demo2

注意：第二个使用jQuery的UI也

来源

2013-01-21 13:03:24 Anujith

这个幻灯片从上到下而不是从左到右。 – LeeTee

@LeeTee：查看更新后的答案... – Anujith

使用此...

$('#cat_icon').click(function() { 
    $('#categories').toggle("slow"); 
    //$('#cat_icon').hide(); 
}); 
$('.panel_title').click(function() { 
    $('#categories').toggle("slow"); 
    //$('#cat_icon').show(); 
});

看到这个Example

问候。

来源

2013-01-21 12:45:43

这个幻灯片从上到下而不是从左到右 – LeeTee

隐藏#categories最初

#categories { 
    display: none; 
}

，然后使用JQuery用户界面，动画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

来源

2013-01-21 12:53:04

这个幻灯片从上到下而不是从左到右 – LeeTee

从右侧滑动：

$('#example').animate({width:'toggle'},350);

向左滑动：

$('#example').toggle({ direction: "left" }, 1000);

来源

2016-10-27 00:41:15

jquery从左到右切换幻灯片

回答

相关问题