javascript - How to stop a JQuery UI addClassremoveClass? - Stack Overflow

admin管理员组

文章数量:1289542

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

If removeClass() is called before addClass() pletes, 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: /

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

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

If removeClass() is called before addClass() pletes, 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/mmstM/42/

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

• javascript
• jquery
• jquery-ui
• animation
• addclass

Share Improve this question Follow asked Sep 2, 2012 at 17:05 ericsocoericsoco 26.3k3131 gold badges101101 silver badges129129 bronze badges 1

• This may be out of the topic but you may want to check out transition-property of CSS3. Of course it's relatively new, and many old browsers don't support so much, but here is some jquery plugin that solve problems. github./westonruter/jquery-css-transitions#readme and demo westonruter.github./jquery-css-transitions/example.html – mask8 Commented Sep 2, 2012 at 18:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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.

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.

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/nickaknudson/8UnRd/

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 paring 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).

本文标签： javascriptHow to stop a JQuery UI addClassremoveClassStack Overflow