jquery切换从左到右和向后滑动答案

【问题标题】：jquery toggle slide from left to right and backjquery切换从左到右和向后滑动
【发布时间】：2013-01-04 12:05:51
【问题描述】：

我在页面左侧有一个“菜单”按钮，一旦选择，我就有一个包含菜单项显示的 div。然后我有另一个按钮可以选择隐藏菜单。

理想情况下，我希望它能够滑出（从左到右）并向后滑出，但未能使其正常工作。我尝试过使用 animate 和 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();
});

【问题讨论】：

这里有一个很好的滑动教程learningjquery.com/2009/02/…
点击#cat_icon 将隐藏（使用toggle()）#categories 和#cat_icon 本身，这是预期的行为吗？

标签： jquery jquery-animate toggle

【解决方案1】：

看到这个：Demo

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

更新：从左向右滑动：Demo2

注意：第二个也是使用jquery-ui

【讨论】：

【解决方案2】：

从右侧滑动：

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

向左滑动：

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

【讨论】：

【解决方案3】：

最初隐藏#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

【讨论】：

【解决方案4】：

使用这个...

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

看到这个Example

您好。

【讨论】：

【解决方案5】：

没有像slideUp()和slideDown()这样的slideLeft()和slideRight()这样的方法，但是你可以使用jQuery的@模拟这些效果987654323@函数。

HTML 代码：

<div class="text">Lorem ipsum.</div>

JQuery 代码：

  $(document).ready(function(){
    var DivWidth = $(".text").width();
    $(".left").click(function(){
      $(".text").animate({
        width: 0
      });
    });
    $(".right").click(function(){
      $(".text").animate({
        width: DivWidth
      });
    });
  });

您可以在此处查看示例：How to slide toggle a DIV from Left to Right?

【讨论】：