jQuery show/hide animation using slideDown() and slideUp() is not working smooth

Question

I have almost finished my code but the slideDown/slideUP animation is not working smooth.

Here is the Fiddle for what I am doing: http://jsfiddle.net/G5RtR/

When I click on "Hold" button, the video boxes slideUp smoothly. But the "On Hold" box slideDown with a jerk.

Can anybody suggest what am I doing wrong? or is there any other better way to do this?

Here is my code:

HTML

    <div id="ccPhoneHold"> 
    <span class="largetext">||</span>
         <p>On Hold</p>
    </div>
    <div id="ccPhoneVideos">
        <object id="videowindow" classid="clsid:6E35B9A8-3289-4B3E-A896-8590DA7E3406" ></object>
        <object id="portsip" classid="clsid:727EF490-A113-4D54-B64C-1455828831AC" ></object>
    </div>
    <input type="button" id="holdCall" class="yellowButton marginRight20" value="Hold" onclick="return btnHold_onclick()" />

CSS

#ccPhoneVideos object, #ccPhoneHold {
    width: 95%;
    min-height: 180px;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.33);
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.33);
    border: 1px solid #ccc;
    margin: 10px 5px 0;
}
#ccPhoneHold {
    width: 95%;
    height: 400px;
    margin: 10px 5px 0;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #DDDDDD 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #DDDDDD));
    background: -webkit-linear-gradient(top, #ffffff 0%, #DDDDDD 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #DDDDDD 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #DDDDDD 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #DDDDDD 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#DDDDDD ', GradientType=0);
    text-align: center;
}
#ccPhoneHold p {
    font-size: 200%;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 4px #969696;
}
#ccPhoneHold .largetext {
    display: block;
    font-weight: bolder;
    margin: 75px auto 40px;
    font-size: 56px;
    color: #ffffff;
    border: 1px solid #ccc;
    width: 85px;
    height: 90px;
    border-radius: 20%;
    background: #ffeb88;
    background: -moz-linear-gradient(top, #ffeb88 0%, #dfc33a 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffeb88), color-stop(100%, #dfc33a));
    background: -webkit-linear-gradient(top, #ffeb88 0%, #dfc33a 100%);
    background: -o-linear-gradient(top, #ffeb88 0%, #dfc33a 100%);
    background: -ms-linear-gradient(top, #ffeb88 0%, #dfc33a 100%);
    background: linear-gradient(to bottom, #ffeb88 0%, #dfc33a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeb88', endColorstr='#dfc33a', GradientType=0);
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
}

jQuery:

$(document).ready(function () {
    $("#ccPhoneHold").hide();
    $("#holdCall").click(function () {
        $("#ccPhoneVideos").slideUp("slow", function () {
            $("#ccPhoneHold").slideDown("slow");
        });
    });
});

Please suggest!

Answer 1

You have min-height: 180px defined for your sliding div#ccPhoneHold.

Since jQuery slideDown gradually increases the elements height, from 0 to it's final value in order to create the slide-down effect, the min-height causes it to jump like that because it prevents the display of heights between 0 and 180 pixels.

Updated Fiddle: http://jsfiddle.net/G5RtR/11/

Added CSS:

div#ccPhoneHold {
    min-height: 0;
}

Answer 2

In general CSS animations are much more performant than javascript ones, you should consider adding a class on click that triggers the up and down animation with a css-transform: translate3d(x,y,z).