jQuery幻灯片插件位置问题

Question

我一直在使用Slide插件来滑入一个div来替换另一个div。下面是我的代码：

http://jsbin.com/iwemaq/15

我必须将第二个div的位置设为绝对位置，以便它与现有的div保持一致。如果你把这个从示例中去掉，它将迫使第一个div向下，并且它不会在动画中与第二个div保持一致。然而，容器的高度不再与内容物保持一致。怎样才能达到这个效果呢？

我希望两个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();
    });

});