缓动不适用于toggleClass() 或addClass()

我有一个在页面上显示和隐藏实用工具栏的功能。我想将其动画化。这不是动画。类“标志”是空的。 “min”类只是更改背景图像以及实用工具栏的高度和绝对位置。

我究竟做错了什么？

$(document).ready(function() {
    var ubar = $("#ccUtilityBarWrapper,#ccUtilityBarWrapperInner,#clickBar");
    ubar.delay(10000).queue(function(nxt) {
        if ($(this).hasClass("flag")) {
        }
        else {
            $(this).addClass("min",1500,"easeInOutQuad");
            nxt();
        }
    });
    $("#clickBar").click(function(e){
        ubar.addClass("flag");
        ubar.toggleClass("min",1500,"easeInOutQuad");
    });
});



#ccUtilityBarWrapper {
    position:       fixed;
    z-index:        3;
    bottom:         0;
    left:           0;
    width:          100%;
    height:         48px;
    background:     #1775b5;
    -webkit-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow:0px 0px 3px rgba(0, 0, 0, 0.75);
    box-shadow:0px 0px 3px rgba(0, 0, 0, 0.75);
}
#ccUtilityBarWrapper.min {
    bottom:         -48px;
}
/* used to place utility nav in absolute position */
#ccUtilityBarWrapperInner {
    background:     none;
    position:       fixed;
    z-index:        4;
    bottom:         0;
    width:          100%;
    height:         81px;
}
#ccUtilityBarWrapperInner.min {
    background:     none;
    height:         40px;
}
#clickBar {
    background:     url("http://teamsite-prod.rccl.com:8030/animated_bar/minimize.png") no-repeat scroll center top transparent;
    height:         34px;
}
#clickBar.min {
    background:     url("http://teamsite-prod.rccl.com:8030/animated_bar/expand.png") no-repeat scroll center top transparent;
    height:         40px;
}

看起来您正在混合 css3 过渡和 jQuery 动画。

你不能为类名添加动画，这是行不通的：

$(this).addClass("min",1500,"easeInOutQuad");

相反，在你的 css3 中，添加一个过渡：

#ccUtilityBarWrapperInner.min {
    background:     none;
    height:         40px;
    -webkit-transition: height 1.5s ease-in-out;
    -moz-transition: height 1.5s ease-in-out;
    -o-transition: height 1.5s ease-in-out;
    transition: height 1.5s ease-in-out;
}

要包含自定义缓动功能，请查看这个网站 http://matthewlein.com/ceaser/.

或者，如果您需要支持较旧的浏览器，请使用 jQuery动画（） http://api.jquery.com/animate/功能

$(this).animate({ height: '40px'}, 1500, "easeInOutQuad");

编辑：实际上，jQuery UI 会对类名进行动画处理，但您需要使用switchClass()功能 http://jqueryui.com/switchClass/.