0

スライドイン サイドバーを表示するための CSS と JavaScript の正しい組み合わせは何でしょうか

私はjquery mobileを使用していますが、今は便宜上

横に 100% の幅と 1em の余白を持つコンテンツがあります。

サイドバーを右からスライドインさせ、同時にコンテンツを左にプッシュするにはどうすればよいですか。

サイドバー用のコンテナーとコンテンツ用のコンテナーを使用して、css を左にフロートし、相対的に配置するように設定してみましたが、両方が表示され、100% の幅が失われるため、明らかにうまくいきませんでした。

これを使用して、すばやくアニメーション化しました

var iSidebar = 0;

    function toggleSidebar(){


    if (iSidebar === 0) {
        iSidebar = 1;
        $(".sidebar").animate({
            left: -100
        }, {
            duration: 500
        });
    }
    else {
        iSidebar = 0;
        $(".sidebar").animate({
            left: 0
        }, {
            duration: 500
        });
    }
    }

ありがとう

4

1 に答える 1

1

プッシュしたい要素もアニメーション化してみてください

if (iSidebar === 0) {
    iSidebar = 1;
    $(".sidebar").animate({
        left: -100
    }, {
        duration: 500
    });
    $(".someContent").animate({
        left: -100
    }, {
        duration: 500
    });
}
于 2013-04-30T23:14:29.330 に答える