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

});