jQuery切换滑动从左到右，再从右到左

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();
});

- LeeTee

---

这是一个关于如何滑动元素的好教程：http://www.learningjquery.com/2009/02/slide-elements-in-different-directions - Pete

点击 #cat_icon 将隐藏（使用 toggle()）#categories 和 #cat_icon 本身，这是预期的行为吗？ - Urban Björkman

Answer 1

看这个：演示

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

更新：从左向右滑动：演示2

注意：第二个演示还使用了jquery-ui

- Anujith

Answer 2

从右侧滑动：

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

向左滑动：

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

- Gedeon Tamsi

---

这个有效。我的完整代码：$('document').ready(function () { $(".exampleDivToClick").click(function(){ $(".exampleDivToSlide").animate({width: 'toggle'}); $(this).toggleClass("active"); }); }); - Phil

Answer 3

最初隐藏#categories

#categories {
    display: none;
}

然后，使用JQuery UI缓慢地动画化菜单。

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

- Olaf Dietsche

Answer 4

使用此...

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

请查看此示例

您好。

- MG_Bautista

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
      });
    });
  });

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

- thomas