Jquery 크로스 페이드 높이 점프 문제

Question

나는 jquery에 완전히 익숙하지 않고 크로스 페이드 중 두 개의 div에서 높이 점프를 해결하려고합니다. 또한 페이지를 새로 고침하는 동작을 기억하기 위해 문제를 직면합니다.

이 내 코드는 내가 크로스 페이드

당신은 서로 영향을주지 않고 두 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

fadeout 대신 fadein 만 사용하여 점프를 중지합니다.

Answer 2

에 사용하는 것을 시도하고있다. 당신은 절대적으로 그들을 배치하여 이것을 달성 할 수 있습니다.

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