javascript - JQuery slideUp/slideDown 不能正常工作

Question

我正在努力制作一个在 slideUp() 操作后会消失的 div。

html:

<div class="rounded gradient" id="BCBox">
    <ul class="BCSelect">
        <li style="text-align:left;">Welcome <b>Username</b>,<br/><br/>Bla Bla Bla: </li>
        <li>
        <div class="button2 BCButton">
        </div>
        </li>
    </ul>
</div>
​

javascript:

$('#BCBox').height($('#BCBox').height());
$('#BCBox').slideUp();​

你可以在这里看到一个演示：http: //jsfiddle.net/4feU9/7/

不知何故，盒子不想按照它应该的方式制作动画......它滑动得非常快。你能帮我吗？我究竟做错了什么？

Answer 1

问题是您将它浮动到右侧，顶部边距很大（边距是元素的一部分，因此在上滑过程中也有动画效果）。在这里你可以看到绝对定位元素例如修复动画：http: //jsfiddle.net/4feU9/8/

html

<div class="rounded gradient" id="BCBox" >

        <ul class="BCSelect">
            <li style="text-align:left;">Welcome <b>Username</b>,<br/><br/>Bla Bla Bla:
            </li>
            <li >
                <div class="button2 BCButton"></div>    
            </li>
        </ul>

    </div>​

javascript

$('#BCBox').slideUp();

​</p>