javascript - 使用 slideDown() 和 slideUp() 的 jQuery 显示/隐藏动画效果不流畅

Question

我的代码快要完成了，但是 slideDown/slideUP 动画运行不流畅。

这是我正在做的 fiddle :http://jsfiddle.net/G5RtR/

当我点击“Hold”按钮时，视频框会平滑地向上滑动。但是“On Hold”框猛然滑落。

任何人都可以建议我做错了什么吗？或者还有其他更好的方法吗？

这是我的代码:

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");
        });
    });
});

请推荐!

Answer 1

您为滑动 div#ccPhoneHold 定义了 min-height: 180px。

由于 jQuery slideDown 逐渐增加元素 height，从 0 到它的最终值以创建向下滑动效果，min-height 导致它跳转之所以这样，是因为它会阻止显示 0 到 180 像素之间的高度。

更新的 fiddle : http://jsfiddle.net/G5RtR/11/

添加的 CSS:

div#ccPhoneHold {
    min-height: 0;
}