Easing not working with toggleClass() or addClass()

Question

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.

What am I doing wrong?

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

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

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.

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

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

---

Edit: Actually, jQuery UI will animate class names, but you'll need to use the switchClass() function.

Answer 2

The following works, if the bar has already animated from the delayed function. If I click first, however, it won't animate, simply switch classes.

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