Interrupting/stop a CSS3 transition on the actual position/state

css, javascript

Solution

Without going too deep in your plugin, you can just re-use your `css3animate` method using the current (computed) values for the props you want, and setting the duration to 0 (1 in you plugin since you use the `!speed` to use the default..)

so in the example using

var $animated = $('div');
$animated.css3animate({"height": $animated.css('height'), "width": $animated.css('width')}, 1);

will do the trick.

example at http://jsfiddle.net/T5LVX/1/

Of course, you should automate this for the current properties in use. If you use a timer when you start the animation and one when someone use the stop method, you can also simulate a pause/resume functionality ..

update

You can store the `cssObject` passed to the animation, to the `data` of the element, and on stop loop through them to get the current values.

So in you `animation` method you could `$obj.data('animationCss', cssObject);` and in the `stop` method

stop : function( clearQueue,jumpToEnd ){
    return this.each(function(){
        var $that = $(this);
        var currentCss = {};
        var animationCss = $that.data('animationCss');
        for (var prop in animationCss)
            currentCss[prop] = $that.css(prop);

        if (jumpToEnd)
        {
            animation($that,currentCss,1, function(){animation($that,animationCss,1)});
        }
        else
        {
            animation($that,currentCss,1);
        }
       console.log("stop was called");
    });
   }

example: http://jsfiddle.net/T5LVX/6/

Problem

I am writing a jQuery plugin to animate elements via CSS3 Transitions. in jQuery there is as `.stop()` that interupts the current animation on the selected element. Any idea how i could stop a running CSS3 animation? Is there a native way to handle this or do i have to mesure the animation, and set the style of the animated element to the current position, color size or whaterver? This is the current state of the jQuery plugin: http://jsfiddle.net/meo/r4Ppw/ I have tried to set to "-webkit-transition-duration" to 0 / none / false. but it does not stop the animation.

Original source