javascript - JavaScript Div の展開

Question

誰かがこれで私を助けてくれることを願っています。HTML Textbox がクリックされたときに、できれば JavaScript のみを使用してDiv の長さを拡張したいと考えています。より詳しく説明するために写真を添付し​​ました。繰り返しますが、誰かが私を助けることができれば - 私は素晴らしいです。

Answer 1

次のような HTML で十分です。

<input type = "text" style = "width: 500px;" onfocus = "expand();" onblur = "collapse();">
<div id = "yourdiv"></div>

CSS:

#yourdiv {
    margin-top: 0px;
    background-color: rgb(0, 162, 232);
    width: 500px;
    height: 0px;
}

JavaScript:

var t;
function expand() {
    var dv = document.getElementById("yourdiv");
    var duration = 500; //number of milliseconds for animation; 1000ms = 1s.
    var stepDur = Math.floor(duration / 200); //200px is our goal height here
    var curHeight = parseInt(dv.style.height.substr(0, dv.style.height.length - 2), 10); //current height of dv
    if(isNaN(curHeight)) {
     curHeight = 0;
    }
    clearTimeout(t); //make sure no other animation is happening
    function doAnim() {
        if(curHeight >= 200) {
             //we're done!
             return;
        }
        curHeight ++;
        dv.style.height = curHeight + "px";
        t = setTimeout(doAnim, stepDur);
    }
    doAnim();
}
function collapse() {
    var dv = document.getElementById("yourdiv");
    var duration = 500; //number of milliseconds for animation; 1000ms = 1s.
    var stepDur = Math.floor(duration / 200);
    var curHeight = parseInt(dv.style.height.substr(0, dv.style.height.length - 2), 10); //current height of dv
    clearTimeout(t); //make sure no other animation is happening
    function doAnim() {
        if(curHeight <= 0) {
             //we're done!
             return;
        }
        curHeight --;
        dv.style.height = curHeight + "px";
        t = setTimeout(doAnim, stepDur);
    }
    doAnim();
}

デモ:小さなリンク.

それが役に立ったことを願っています！