Question

我一直在使用Slide插件滑动div来替换另一个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();
    });

});

jQuery幻灯片插件位置问题

2 个答案: