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

Mottie · Accepted Answer · 2013-04-24T22:53:00.073

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.

CSS3 transitions won't work for IE8, which I'm still required to support. According to this: http://docs.jquery.com/UI/Effects/ClassTransitions addClass() and toggleClass() have easing. Perhaps it's for a later version of jQuery than we're using (1.4.2). I'll try the switchClass(). — absynthe minded web smith, Apr 25 '13 at 13:55

score 0 · Answer 2 · answered May 05 '13 at 05:17

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

Figured it out. The queue was preventing the animation from running on click. — absynthe minded web smith, May 05 '13 at 21:31

Easing not working with toggleClass() or addClass()

2 Answers2

Linked