宽松不toggleClass（）或addClass工作（）(Easing not working w

我有一个函数来显示和隐藏页面上的工具栏。 我想制作动画。 这不是动画。 类“标志”是空的。 “最小”级简单地改变所述背景图像和所述高度和实用杆的绝对位置。

我究竟做错了什么？

$(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;
}

Answer 1:

它看起来像你的混合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;
}

若要包括自定义缓动函数，检查出这个网站 。

或者，如果您需要支持旧的浏览器，使用jQuery的动画（）函数

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

---

编辑：其实，jQuery UI的动画将类名，但你需要使用switchClass()函数 。

Answer 2:

下面的作品， 如果酒吧已经从延迟功能动画。 如果我点击第一，但是，它不会动画，简单地切换类。

var ubar = $("#ccUtilityBarWrapper,#ccUtilityBarWrapperInner,#clickBar");
ubar.delay(10000).queue(function(nxt) {
    if ($(this).hasClass("flag")) {
    }
    else {
        ubar.animate({bottom: '-48px'}, 300);
        ubar.addClass("min");
        nxt();
    }
});
ubar.click(function(){
    ubar.addClass("flag");
});
$("#clickBar").click(function(){
    if (ubar.hasClass("min")) {
        ubar.animate({bottom: '0'}, 300);
        ubar.removeClass("min");
    }
    else {
        ubar.animate({bottom: '-48px'}, 300);
        ubar.addClass("min");
    }
});

文章来源: Easing not working with toggleClass() or addClass()