使用slideDown（）和slideUp（）的jQuery顯示/隱藏動畫不能正常工作

我幾乎已經完成了我的代碼，但是動畫不能正常工作。使用slideDown（）和slideUp（）的jQuery顯示/隱藏動畫不能正常工作

下面是我在做什麼的小提琴：http://jsfiddle.net/G5RtR/

當我點擊「保持」按鈕，視頻框效果基本show順利。但是，「擱置」箱子滑出一個混蛋。

有人可以建議我做錯了什麼？還是有其他更好的方法來做到這一點？

這裏是我的代碼：

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

請建議！

來源

2014-04-03 UID

您有min-height: 180px定義爲您的滑動div#ccPhoneHold。

由於到它的，以創造滑動向下作用最終值的jQuery了slideDown逐漸增加的元素height，從0時，min-height使其跳躍像，因爲它防止在0和180像素之間的高度的顯示。

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

新增CSS：

div#ccPhoneHold { 
    min-height: 0; 
}

來源

2014-04-03 22:38:09

一般而言，CSS動畫比javascript更具性能，您應該考慮在點擊時添加一個類，以觸發css-transform: translate3d(x,y,z)的向上和向下動畫。

來源

2014-04-03 22:20:53

使用slideDown（）和slideUp（）的jQuery顯示/隱藏動畫不能正常工作

回答

相關問題