Jquery кросс исчезает проблема прыжка с высоты

Question

Я совершенно новичок в jquery и пытаюсь решить прыжок в высоту во время затухания двух дивов. Также сталкиваюсь с проблемой запоминания действия при обновлении страницы.

Это мой код, который я пытаюсь использовать для кросс-фэйда

$(document).ready(function(){
    $("#playlist").css("display","none");
    $("#vplaycheck").click(function(){

        if ($("#vplaycheck").is(":checked"))
        {
            $("#playlist").fadeIn("fast");
            $("#v_single").fadeOut("fast");
        }
        else
        {
            $("#playlist").fadeOut("fast");
        $("#v_single").fadeIn("fast");
        }
    });
    if ($("#vplaycheck").is(":checked"))
    {
        $("#playlist").fadeIn("fast");
        $("#v_single").fadeOut("fast");
    }
    else
    {
        $("#playlist").fadeOut("fast");
        $("#v_single").fadeIn("fast");
    }
});


<div>
    <form>      
        <label><input type="checkbox" id="vplaycheck" />Checkbox</label>

        <div id="v_single">
            <h1>Single V</h1>
        </div>

        <div id="playlist">
            <label form="name">Name:</label>
            <input type="text" id="name" />

            <label form="info">Comment:</label>
            <input type="textarea" id="info" />
        </div>  
    </form>
</div>

Answer 1

Вместо затухания я использовал только fadein, и он перестает прыгать.

Answer 2

Вам нужно, чтобы два div занимали одинаковое пространство, не влияя друг на друга.Вы можете добиться этого, расположив их абсолютно.

form{ position: relative; }  
​#playlist,#v_single{
   position: absolute;
   float: left;            
}