Question

我差不多完成了我的代码，但 slideDown / slideUP 动画无法正常运行。

这是我正在做的事情的小提琴：http://jsfiddle.net/G5RtR/

当我点击＆＃34; 暂停＆＃34;按钮，视频盒滑动顺畅。但是＆＃34; 暂停＆＃34; box slideDown with a jerk。

有人能说出我做错了什么吗？或者还有其他更好的方法吗？

这是我的代码：

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

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

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

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

添加了CSS：

div#ccPhoneHold {
    min-height: 0;
}

Answer 2

一般来说，CSS动画比javascript更高效，你应该考虑在点击上添加一个类，用css-transform: translate3d(x,y,z)触发上下动画。

使用slideDown（）和slideUp（）的jQuery显示/隐藏动画不能正常工作

2 个答案: