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

Question

我正在尝试编写一个小脚本来滑动所有页面内容，以便从下面的Facebook移动网站上显示隐藏的菜单，如此图像。

我试图使用jquery ui slide功能重新创建它，但是不能让它工作，我一直在使用

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

这是一半，但我不知道如何进一步采取它，我不是试图滑动所有的内容，只有90％作为上面的图像，所以你仍然可以看到主要内容的peice，有任何想法吗 ？我在这里做了一个jsfiddle http://jsfiddle.net/pudle/ckNx9/4/

Answer 1

在这里：http://jsfiddle.net/ckNx9/6/

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

以下是.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/