使用jquery ui滑出“移動”類型菜單

Question

我試着寫一個小腳本來滑動所有頁面內容，以顯示隱藏的菜單，如下圖所示的Facebook移動網站。

我試圖使用jquery ui幻燈片功能重新創建它，但不能讓它工作，我一直在使用

$('.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/