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

而不是淡出我只使用淡入淡出，它停止跳躍。

Answer 2

你需要做兩個div佔據相同的空間，而不相互影響。你可以通過絕對定位來達到這個目的。

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