jQuery幻燈片插件位置問題

Question

我一直在使用幻燈片插件滑動div來取代另一個div。這裏是我的代碼：

http://jsbin.com/iwemaq/15

我不得不作出與現有的div的，第二個div絕對如此，它會留平的位置。如果你從這個例子中得出這個結論，它會強制第一個div，並且它在第二個動畫時不會與第二個div保持水平。然而，容器的高度不再與內容粘在一起。我怎樣才能達到這個效果？

我希望2個div能夠來回移動，同時保持兩個div的容器，任何建議都會真的有所幫助！謝謝！

Answer 1

如果我通過容器正確理解您的問題，則表示圍繞內容的邊框。如果這是正確的，那麼一個簡單的解決方案是設置容器div的高度是動畫完成時當前顯示的div高度：

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

編輯：這是另一種動畫版容器的高度，以避免上面發佈的版本發生跳躍。 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> 

的Javascript：

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(); 
    }); 

});