jQuery Slide 插件定位问题

Question

我一直在使用 Slide 插件将一个 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