3

左から div を引き出しますか? やさしい。右から抜く？それほどでもない。

画面外に隠されているが、画面上の小さなタグに接続されているdivを探しています。ユーザーがタグをクリックすると、div 全体がスライドします。これは、左から jQuery と CSS を使用した非常に基本的なものです。ただし、ユーザーは右からスクロールして「非表示」の div を表示できます。

これが私が望むものです（http://jsfiddle.net/yHPTv/）ただし、divがオフスクリーンの左に部分的に隠されているのではなく、オフスクリーンの右に部分的に隠されている必要があります。

これが私がこれまでに試したことです（http://jsfiddle.net/LU8En/）。右にスクロールするだけなので、明らかに機能しません。

アニメーション（またはスライドまたはトグルドロップ）を使用する際の問題は、div全体が消えたり現れたりしたくないということです。その少しだけ存在させたいのです。

4

3 に答える 3

12

http://jsfiddle.net/yHPTv/3/

以下の例は、新しいバージョンの jQuery では機能しないことに注意してください。機能する例については、以下をお読みください。

$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
    });
});

すべてを左から右に変更し、クリックミー div とテキスト コンテンツの位置を変更します。

また、本体overflow-x: hiddenに水平スクロールバーを防止する を付けます。

いくつかのマイナー アップデートにより、最新バージョンとの互換性が確保されます。

$(function () {
    var rightVal = -280; // base value
    $("#clickme").click(function () {
        rightVal = (rightVal * -1) - 280; // calculate new value
        $(this).parent().animate({right: rightVal + 'px'}, {queue: false, duration: 500});
    });
});

http://jsfiddle.net/yHPTv/2968/

于 2012-05-02T21:34:49.467 に答える