以绝对/正确位置切换内容

Question

当我把内容（位置绝对）放到右边，当我想切换它时，动画发送给他左边，内容不是静态的：/我不想要那个。

<div class="container">

                <div id="myPreNav" style="position: relative; width: 100%; height: 100px;">
                        <div style="position: absolute; right: 0px; top: 10px; background: #800000; width: 100px;">test</div>
                </div>

                <div id="toggle" style="background: #eeeeaa;">TOGGLE</div>

</div>

JS：

$('#toggle').click(function() {
    $('#myPreNav').toggle("slow");
});

查看问题：http://jsfiddle.net/fE2Th/9/

我能做什么？

Answer 1

看起来你需要slideToggle：

$('#toggle').click(function () {
    $('#myPreNav').slideToggle("slow");
});

演示：http://jsfiddle.net/fE2Th/10/

当您使用toggle时，它会动画#myPreNav的宽度，从而导致文本内容的移动。 slideToggle只会转换高度，使文字保持静态。