Question

我对jquery完全不熟悉，并尝试在交叉衰落两个div期间解决高度跳跃问题。还面临着要记住刷新页面操作的问题。

这是我尝试用于交叉淡入淡出的代码

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

你需要让两个div占据相同的空间而不会相互影响。你可以通过绝对定位来实现这一点。

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

Answer 2

而不是淡出，我只使用了fadein并且它不再跳跃。

Jquery交叉淡入淡出跳高问题

2 个答案: