Question

我在页面的左侧有一个“菜单”按钮，一旦选中，我就有一个包含菜单项显示的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();
});

Answer 1

请参阅：Demo

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

更新：从左向右滑动：Demo2

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

Answer 2

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

Answer 3

从右边滑动：

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

向左滑动：

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

Answer 4

使用此...

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

请参阅此Example

问候。

Answer 5

没有slideLeft()和slideRight()这样的方法，它们看起来像slideUp()和slideDown()，但你可以模拟这些使用 jQuery 的 animate() 函数的效果。

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?

jquery切换从左到右滑动

5 个答案: