jQuery Slide Plugin 위치 문제

Question

다른 div를 바꾸기 위해 Slide 플러그인을 사용하여 div를 슬라이드했습니다. 나는 기존 사업부와 두 번째 DIV 절대가있을 것이다 그래야 수준의 위치를해야했습니다

http://jsbin.com/iwemaq/15

: 여기 내 코드입니다. 이것을 예제에서 빼내면 첫 번째 div를 강제로 제거하고 두 번째 레벨은 애니메이션으로 그대로 유지하지 않습니다. 그러나 컨테이너의 높이가 더 이상 내용과 달라 붙지 않습니다. 이 효과를 얻으려면 어떻게해야합니까?

레벨을 유지하면서 두 div에 대한 컨테이너를 유지하면서 2 개의 div가 앞뒤로 이동할 수있게하려면 모든 조언이 도움이 될 것입니다. 감사!

Answer 1

귀하의 질문을 컨테이너로 정확하게 이해하고 있다면 콘텐츠 주변의 경계를 의미합니다. 여기에 애니메이션 다른 버전이다

<script> 
    jQuery(document).ready(function() { 

     jQuery("#showInstructionsPanel").live("click", function() { 

      jQuery('#mainContentContainer').hide('slide', { 
       direction: 'left' 
      }, 1000); 

      jQuery('#instructionsPanel').show('slide', { 
       direction: 'right' 
      }, 1000, function() { jQuery('#container').height(jQuery(this).height()); }); 
     }); 

     jQuery("#hideInstructionsPanel").live("click", function() { 

      jQuery('#mainContentContainer').show('slide', { 
       direction: 'left' 
      }, 1000, function() { jQuery('#container').height(jQuery(this).height()); }); 

      jQuery('#instructionsPanel').hide('slide', { 
       direction: 'right' 
      }, 1000); 
     }); 


    }); 
</script> 

편집 :이 올바른 경우, 간단한 해결책은 현재 애니메이션이 완료 될 때 표시되는 DIV의 높이로 용기 DIV의 높이를 설정하는 것 위에 게시 된 버전에서 발생하는 점프를 피하기 위해 컨테이너의 높이. http://jsbin.com/iqovox

Answer 2

나는 아마 좀 더 우아한 해결책 (http://jsfiddle.net/MM3D4/ 참조), 대안을 가지고 :

CSS :

article, aside, figure, footer, header, hgroup, 
menu, nav, section { display: block; } 

#container { 
    display: block; 
    width: 100%; 
    overflow: hidden; 
} 
#panelWrapper { 
    display: block; 
    width: 200%; 
} 

#instructionsPanel, #mainContentContainer { 
    display: inline-block; 
    width: 49.8%; 
} 

HTML :

<div id="container" style="border:thin black solid"> 
    <div id="panelWrapper"> 
     <div id="mainContentContainer"> 
      <a href="#" style="color:blue;text-decoration:underline" id="showInstructionsPanel">See Help column</a> 
      <div class="heading2">Main Content</div> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
     </div> 
     <div id="instructionsPanel"> 
      <a href="#" style="color:blue;text-decoration:underline" id="hideInstructionsPanel">&gt;- Click here to Go Back</a> 
      <div class="heading2">Help Panel</div> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <br /><br />Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
     </div> 
    </div> 
</div> 

자바 스크립트 :

jQuery(document).ready(function() { 
    jQuery("#showInstructionsPanel").live("click", function(e) { 
     jQuery('#mainContentContainer').animate({'margin-left':'-50%'}, 1000); 
     e.preventDefault(); 

    }); 
    jQuery("#hideInstructionsPanel").live("click", function(e) { 
     jQuery('#mainContentContainer').animate({'margin-left':'0'}, 1000); 
     e.preventDefault(); 
    }); 

});