12

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

5 回答 5

16

看到这个：演示

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

更新：从左向右滑动：Demo2

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

于 2013-01-21T13:03:24.943 回答
9

从右侧滑动：

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

向左滑动：

$('#example').toggle({ direction: "left" }, 1000);
于 2016-10-27T00:41:15.797 回答
6

#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_titlepanel_item 

$('.panel_title,.panel_item').click(function () {
    $('#categories').hide('slide', {direction: 'left'}, duration, function() {
        $('#cat_icon').show(duration);});
});

JSFiddle

于 2013-01-21T12:53:04.583 回答
1

用这个...

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

请参阅此示例

问候。

于 2013-01-21T12:45:43.323 回答
0

没有像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
      });
    });
  });

你可以在这里看到一个例子：如何滑动切换一个 DIV 从左到右？

于 2021-02-02T01:41:46.590 回答