jquery transit animation and .stop() fx queue

Question

First off, jQuery Transit rocks. If you haven't seen it, check out http://ricostacruz.com/jquery.transit/ and be amazed!

One problem though is that while it claims to use jQuery's effects queue, and seems to for the most part, I can't get jQuery's .stop() method to work with it.

I've posted a fiddle here: http://jsfiddle.net/nicholasstephan/sTpa7/

If you click the animate button, a standard jQuery .animate() is used to slowly move the box to the right. Hitting stop will, as you'd expect, stop the animation. Hitting reset will also stop the animation and put the box back where it started.

If you click transition, it should do exactly the same thing... but it doesn't...

What's going on here? Anyone know a workaround for this?

Thanks.

Answer 1

Here is a solution that might work.

try Creating a new transition function that queues an extra callback. This callback can cleanup after the animation is dequeued by stop. Clear and Skip Instructions However are not received from the old stop function. But we can create a new stop function for that. This is just typed in browser and completely untested

(function($){
    $.fn.stopableTransition = function (...){
        var skip = false
        var clear = false
        this.handle("stopTransition", function(doclear, doskip){
            skip = doskip; clear = doclear;
        })
        this.transition(...)
        this.queue(function(){
            if(skip){
               //todo: ensure animation is removed from css
               //todo: move object to where the animation would have finished
            } 
            else
            {
               //todo: ensure animation is removed from css
               //todo: make sure object stays at its current position
            }

            if(clear){
                skip = false
                clear = false
                $(this).clearQueue()
            }  
            else 
            { 
                skip = false
                clear = false
                $(this).dequeue()
            }

        })
    }
    $.fn.stopTransition = function (clear, skip){
        clear = (typeof(clear) === 'undefined') ? false : clear;
        skip = (typeof(skip) === 'undefined') ? false : skip;
        this.triggerHandler("stopTransition", [clear, skip])
        this.dequeue();
    }
})(jQuery)