使用 slideDown() 和 slideUp() 的 jQuery 显示/隐藏动画不流畅答案

【问题标题】：jQuery show/hide animation using slideDown() and slideUp() is not working smooth使用 slideDown() 和 slideUp() 的 jQuery 显示/隐藏动画不流畅
【发布时间】：2014-04-03 22:14:36
【问题描述】：

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

这是我正在做的事情的小提琴：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");
        });
    });
});

请推荐！

【问题讨论】：

标签： javascript jquery html css show-hide

【解决方案1】：

你已经为你的滑动定义了min-height: 180pxdiv#ccPhoneHold。

由于 jQuery slideDown 逐渐增加元素 height，从 0 到它的最终值以创建向下滑动的效果，min-height 导致它像这样跳跃，因为它阻止了高度在 0 和180 像素。

更新小提琴：http://jsfiddle.net/G5RtR/11/

添加了 CSS：

div#ccPhoneHold {
    min-height: 0;
}

【讨论】：

【解决方案2】：

一般而言，CSS 动画比 javascript 动画的性能要好得多，您应该考虑添加一个点击类，使用 css-transform: translate3d(x,y,z) 触发向上和向下动画。

【讨论】：