javascript - 使用 jquery ui 滑出“移动”类型菜单

Question

我正在尝试编写一个小脚本来滑动所有页面内容，以从下面的 facebook 移动网站显示隐藏的菜单，例如这张图片。

我尝试使用 jquery ui 幻灯片功能重新创建它，但不能让它正常工作，我一直在使用

$('.click').click(function() {
    $('.slider').toggle("slide", {
        direction: "right",
        distance: 100
    }, 500);
});

这是一半，但我不知道如何更进一步，我没有试图滑动所有内容，只是上面图片的 90%，所以你仍然可以看到主要内容的一部分，有什么想法吗？我在这里做了一个jsfiddle http://jsfiddle.net/pudle/ckNx9/4/

Answer 1

给你：http: //jsfiddle.net/ckNx9/6/

它涉及最初隐藏滑块，然后允许切换在滑动 180 像素时显示/隐藏它。

下面是 .slider 的修改后的 CSS。

.slider {background:blue; width: 180px; height: 200px; display: none;}

Answer 2

据我所知，jQuery UI 切换幻灯片效果显示/隐藏了整个容器。您可以单独使用一点 jQuery 来实现您描述的效果：

http://jsfiddle.net/ckNx9/7/

$('.click').on('click', function() {
    if($('.slider').hasClass('out')) {
       $('.slider').animate({
            left: '0px'
        }, 500).removeClass('out');
    } else {
        $('.slider').animate({
            left: '180px'
        }, 500).addClass('out');
    }
});

Answer 3

这可能是最简单的：

$('.slider').slideToggle('slow');

更多信息在这里：http ://api.jquery.com/slideToggle/