轻松不使用toggleClass（）或addClass（） [英] Easing not working with toggleClass() or addClass()

问题描述

我有一个功能来显示和隐藏页面上的实用工具栏。我想给它制作动画。这不是动画。类flag为空。 min类只是改变背景图像以及实用工具栏的高度和绝对位置。

I have a function to show and hide a utility bar on a page. I want to animate it. It's not animating. The class "flag" is empty. The "min" class simply changes the background image and the height and absolute positions of the utility bar.

我做错了什么？

$(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动画。

It looks like you're mixing css3 transitions and jQuery animation.

你不能为类名设置动画，这不会起作用：

You can't animate a class name, this WILL NOT WORK:

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

相反，在你的css3中，添加一个转换：

instead, in your css3, add a transition:

#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;
}

要包含自定义缓动功能，请查看此网站。

To include a custom easing function, check out this site.

或者，如果您需要支持旧浏览器，请使用jQuery的< a href =http://api.jquery.com/animate/ =nofollow> animate（）功能

Or, if you need to support older browsers, use jQuery's animate() function

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

---

编辑：实际上，jQuery UI会为类名设置动画，但您需要使用 switchClass（）函数。

这篇关于轻松不使用toggleClass（）或addClass（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！