Geek asks and answers

JQuery slideUp / slideDown not working as intended

I am trying to make a div that will disappear after slideUp ().

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();​

Here you can see the demo: http://jsfiddle.net/4feU9/7/

Somehow, the box does not want to animate how it should ... It is moving fast. you can help? What am I doing wrong?

+3
source share
1 answer

The problem is that you are floating to the right with a large top edge (the field is part of the element and thus is also animated during the slide show). Here you can see that absolutely positioning the element, for example, captures the animation: 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();

+3
source

More articles:


All Articles