javascript - div を画面上部にスライド

Question

誰かが入力フィールドでEnterキーを押したときに、divを画面の上部にスライドさせようとしています。私が抱えている問題は、div が画面の上から 50 ピクセル移動する代わりに、それが入っている div の上から 50 ピクセル移動することです。

http://jsfiddle.net/rtxu2/

実際のコードは次のとおりです。

HTML

<div class="home-nav">
    <div style="display: none;position: absolute;margin-top: -1px" id="search-box">
        <form action="/" method="get"><input type="text" name="q" class="q" /></form>
    </div>
</div>

JavaScript

    $(".q").keydown(function(e){
        if(e.keyCode == 13){
            var val = $(this).val();
            window.location = "#q="+val;
            $(".space").animate({
                width: "100px"
            }, "slow");
            $("#search-box").animate({
                top: "50px"
            }, "slow");
            return false;
        }
    });

CSS

div.home-nav{
    line-height: 4em;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 300px;
    height: 300px;
    margin: auto;
}

内側の div を絶対位置に配置した理由は、リンクをクリックすると、div/input がリンクをカバーして少し効果があるからです。

Answer 1

アニメーション時に .sub を .main に対して相対的に配置したくない場合は、HTML の .main 内に配置しないでください。

http://jsfiddle.net/rtxu2/10/

<div class="main"></div>
<div class="sub">
    <form>
        <input type="text" />
    </form>
</div>

Answer 2

内部に配置されている div ではなく、画面の上部に相対的に配置する場合は、div を固定に設定してみてください。

div.home-nav{
    line-height: 4em;
    position: fixed;
    top: 0;
    left: 300px;
    height: 300px;
    margin: auto;
}

Answer 3

わかった！私がしたことは、divから要素を削除し、誰かがEnterキーを押したときにそれを本文に配置することでした. 次に、アニメーションを実行します。誰かがより良い方法を持っている場合は、投稿してください!

    $(".q").keydown(function(e){
        if(e.keyCode == 13){
            var val = $(this).val();
            var item = $(this).closest("#search-box");
            var left = item.offset().left;
            var top = item.offset().top;

            $(this).closest("#search-box").remove();
            item.css({
                top: top + "px",
                left: left + "px",
                zIndex: 100
            })
            $("body").prepend(item);

            window.location = "#q="+val;
            $(".space").animate({
                width: "100px"
            }, "slow");
            item.animate({
                top: "35px"
            }, "slow");
            return false;
        }
    });