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

Posted 2023-05-08

【中文标题】jquery切换从左到右和向后滑动

【英文标题】：jquery toggle slide from left to right and back

【发布时间】：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 本身，这是预期的行为吗？

【参考方案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?