1

下の Facebook モバイル サイトの画像のように、すべてのページ コンテンツをスライドさせて非表示のメニューを表示する小さなスクリプトを作成しようとしています。

スライドアウトメニュー例

jquery ui スライド関数を使用してこれを再作成しようとしましたが、うまく動作しませんでした。

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

これは途中ですが、それをさらに進める方法がわかりません。すべてのコンテンツをスライドさせようとしているわけではありません。上の画像のように 90% だけなので、まだメイン コンテンツの一部を見ることができます。何かアイデアはありますか? ここでjsfiddleを作成しましたhttp://jsfiddle.net/pudle/ckNx9/4/

4

3 に答える 3

2

どうぞ: http://jsfiddle.net/ckNx9/6/

最初にスライダーを非表示にしてから、180px ずつスライドするときにトグルでスライダーを表示/非表示にできるようにする必要がありました。

以下は、.slider の変更された CSS です。

.slider {background:blue; width: 180px; height: 200px; display: none;}
于 2013-04-29T14:11:00.467 に答える
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');
    }
});
于 2013-04-29T14:24:11.313 に答える