jquery - divの外観側

Question

このサイトhttp://gabrieleromanato.com/で、このような死に至るサイドバーを作成したいと思います。

実際、「メールアイコンを押すと、私が望む」効果があります。私はjqueryの知識がほとんどないので、「目標」に到達できません。

あなたの何人かが私を助けてくれることを願っています

すべてに前もって感謝します

Answer 1

jsfiddleはこちら

ボックスの幅を切り替えるために .animate() を使用しました。

HTML:

<div id="box">
    <div id="opener">Opener</div>
    <div id="message">This is the message</div>
</div>

CSS:

#box {
    position:fixed;
    top: 20px;
    left: 0;
    width: 200px;
    height: 400px;
}
#opener {
    position: relative;
    float: right;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: #000;
    overflow: hidden;
}
#message {
    float: left;
    overflow: hidden;
    background: #f00;
    width: 160px;
}

jQuery:

$(document).ready(function () {

    $("#box").css("width", "40px");
    $("#message").css("width", "0px");

    var show = 0;

    $("#opener").click(function () {
        if (show === 0) {
            $("#box").animate({
                width: '200px'
            });
            $("#message").animate({
                width: '160px'
            });
            show = 1;
        } else {
            $("#box").animate({
                width: '40px'
            });
            $("#message").animate({
                width: '0px'
            });
            show = 0;
        }
    });
});

ハードコーディングされた値を使用する必要がないように、いつでも jQuery を一般化できます。