Jqueryクロスフェード高さジャンプ問題

Question

私はjqueryを完全に新しく、クロスフェード中に高さジャンプを解決しようとしています。また、ページをリフレッシュするためのアクションを覚えておく問題に直面しています。

これは私のコードで私は次の2つの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

フェードアウトではなく、フェーダインだけを使用してジャンプを停止します。

Answer 2

クロスフェードのために使用しようとしています。あなたは絶対にそれらを配置することによってこれを達成することができます。

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