CODEWITHSUNDEEP
javascriptjqueryjquery-uianimationaddclass
ericsoco
ericsoco

Reputation: 26253

How to stop a JQuery UI addClass / removeClass?

I'm using JQuery UI to addClass(), and later to removeClass().

If removeClass() is called before addClass() completes, it queues up and executes later. This is not ideal, I'd rather have the removeClass() execute immediately from the current CSS values.

If I invoke stop() just before add/removeClass(), animation seems permanently 'frozen' at the moment of the stop() call, though the add/removeClass() callback still fires.

Just the JS here:

var obj = $("#obj");
obj.addClass("obj");

$("#add").click(function(){
    //obj.addClass("adder", 2000, "easeInOutCubic", onAdded);
    obj.stop().addClass("adder", 2000, "easeInOutCubic", onAdded);
});

$("#remove").click(function(){
    //obj.removeClass("adder", 2000, "easeInOutCubic", onRemoved);
    obj.stop().removeClass("adder", 2000, "easeInOutCubic", onRemoved);
});

function onAdded () { console.log("added"); }
function onRemoved () { console.log("removed"); }

All the rest here: http://jsfiddle.net/mmstM/42/

This seems like it would be a common issue but haven't found any good info on SO or elsewhere...note this is for JQuery UI, not core.

Upvotes: 4

Views: 3660

Answers (4)

Winfield Trail
Winfield Trail

Reputation: 5695

The issue is occurring because even after the class is removed, the interstitial size rules generated for the animation are still present in the element's style property.

We can fix that part trivially by doing:

obj.stop().attr("style", "").removeClass("adder", 2000, "easeInOutCubic", onRemoved);

However, this causes a rather sizeable jump in the animation for the reason that easings for class manipulation don't take element styles into account - the same reason why simply clearing the queue in the first place didn't work. The quick solution to this, I fear, is pretty ugly: using the .animate() method instead, and moving the styles from the class to your jQuery, like so:

$("#add").click(function(){
    //obj.addClass("adder", 2000, "easeInOutCubic", onAdded);
    obj.stop().animate({
        width: '200px',
        height: '80px',
    }, 2000, "easeInOutCubic", onAdded);
});

$("#remove").click(function(){
    //obj.removeClass("adder", 2000, "easeInOutCubic", onRemoved);
    obj.stop().animate({
        width: '40px',
        height: '40px',
    }, 2000, "easeInOutCubic", onRemoved);
});

You can check out the working example here, with a bonus hack to load the width/height values from CSS and stash them in objects to mimic the add/removeClass() syntax.

Upvotes: 7

Milind R
Milind R

Reputation: 681

Why not search the stylesheet, grab the cssText, and parse it (I am not sure how to do this in the best possible way) into a JS object?

The stylesheets can be searched using document.stylesheets[i].rules array, by comparing the selectorText member of a CSS rule.

One jQuery plugin that does both these is animateToSelector.

The main problem is that its not flexible. I cannot animate a child of a (say) moused over element. Ideally we should simply get the style object which we can pass to animate()

A solution of this kind would be awesome because jQuery-UI addClass does not support multiple selectors (AFAIK).

Upvotes: 1

nickaknudson
nickaknudson

Reputation: 4807

The problem is that when you stop the animation, your class is not applied to the element. It is now in an unanticipated state. So removing the class has no effect because the class isn't applied to the element.

Your best bet is to do something like this:

http://jsfiddle.net/nickaknudson/8UnRd/

Upvotes: 1

ericsoco
ericsoco

Reputation: 26253

Here's where I finally ended up:

$.fn.extend({
    animateClass: function (propNames, className, speed, easing, callback) {
        var $store = $("<div>").css('display', 'none').addClass(className);
        $("body").append($store);

        var i=0, len=propNames.length, name, propsMap={};
        for (i; i<len; i++) {
            name = propNames[i];
            propsMap[name] = $store.css(name);
        }
        $store.remove();

        this.stop().animate(propsMap, speed, easing, callback);
    }
});

var $obj = $("#obj");
$("#bigger").click(function(){
    $obj.animateClass(["width", "height"], "bigger", 2000, "easeOutQuad", function () { console.log("BIG"); });
});

​ Working example with multiple states here.

It's not the prettiest thing in that it requires passing a list of css properties to use in the animation, rather than just using everything in the stylesheet, but I couldn't find a way to separate the properties specified in the stylesheet from all the other styles already on the dummy "$store" div created within animateClass().

I'll accept @sudowned's answer as it was the most helpful in leading me here.

Upvotes: 1

Related Questions