Question

I am completely new to jquery and trying to solve height jump during the cross fading two div. Also facing the issue to keep remember action on refreshing the page.

This is my code I am trying to use for cross fade

$(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

Instead of fadeout I used only fadein and it stops jumping.