Add .stop() method

[kfiku]

Adding .stop() method. It's somethink line jQuery.animate().stop();

[ullmark]

correct me if I'm wrong but isn't stop already there and working in 0.1.3, since I've been using it and it seemed to work 😄

[kfiku]

sorry for my compit. I dont test it very much and there is a bug so dont public this! But if you paste to console somethink line this:

var div = $("

transmit test

");
$('body').prepend(div);
div = div.transit(
{ opacity: 0 },
5000,
function () {
console.log("transmit callback");
}
);
setTimeout(function () {
div.stop();
// transition dont stop
console.log("stop transmit");
}, 2500);

console prints:
stop transmit
transmit callback

You see that its not working very well. Correct me if I'm wrong.

[rstacruz]

Why is where windowTimeout?

[rstacruz]

Personally, I don't like monkey-patching the jQuery object to add a new method like .stop(). It should probably instead be a $.fn.transitionStop() or something similar.

Also, resetting the style attribute isn't very friendly... you may be killing some styles that you're not meant to reset. Perhaps .css('transition', 'none') would be nicer.

[tilleul]

Here's my humble solution based on kifku's fork (it requires the code lines with the windowTimeout/clearInterval as in his fork):

    self.transitionStop = function (clearTransitionCB) {
        if($.transit.useTransitionEnd) {
            self.unbind(transitionEnd);
        } else {
            clearTimeout(windowTimeout);
        }
        self.stop(true,true);
        if (clearTransitionCB) clearTransitionCB.apply(self);
        return self;
    };

it's still under testing but so far it seems to do the job ...

the .stop() is needed to clear the jQuery queue, otherwise new transitions on the same element won't work.

this function accepts a callback to include a way to clear/reset nicely the transitions using techniques explained in issue #18

thanks for this excellent plugin !

[rstacruz]

Thanks @tilleul, nice call on the .stop(true, true). I still think this should be bound to jQuery.fn.transitionStop() though, because otherwise this won't work:

$("#box").transition(...);
$("#box").transitionStop();

[PawelGIX]

Is there chance to have this functionality? jQuery.animate().stop(); It's very handy

[ghost]

This is also a showstopper for me from using this plugin.

[lorenzomigliorero]

For stop a current animation, you only add on the selector the css transition declaration "-webkit-transition: all 1s ease;", then remove the attr style.

Example: http://jsfiddle.net/lurex89/g4H7X/

UPDATE:
Look also with this cross browsing solution:

jquery.transit.js row 557:

    // Set defaults. (`400` duration, `ease` easing)
    if (typeof duration === 'undefined') { duration = $.fx.speeds._default; }
    if (typeof easing === 'undefined')   {if ($.support.transition) { easing = $.cssEase._default; } else { easing = "swing"; } }
   if ($.support.transition) duration = toMS(duration);
    // Save the original style for reset on old browser
      $(this).attr("data-duration", duration);
      $(this).attr("data-easing", easing);
      if (!$.support.transition) {
       $(this).stop().animate(properties, duration, easing);
        for (properti in properties) {
          var upperCase = properti.replace(/[a-z]/g, '')
          var replaceProperti;
          (upperCase != "") ? replaceProperti = properti.replace(upperCase, "_" + upperCase) : replaceProperti = properti;
          $(this).attr("data-" + replaceProperti, $(this).css(properti));
        };
        return;
      };

and add this method for stop animation (JS + CSS)

  // reset transition
  $.fn.resetTransition = $.fn.transit = function(noanimation) {
    if ($.support.transition) {
      $(this).removeAttr("style");
      if (!noanimation) $(this).addClass("resetClass");
    } else {
      var originalProperties = {};
      for (properti in $(this).data()) {
        var dataProperti = properti;
        if (properti.indexOf("_") >= 0) {
            var index = properti.indexOf("_");
            var propertiArray = properti.split("");
            delete propertiArray[index];
            propertiArray[index + 1] = propertiArray[index + 1].toUpperCase();
            properti = propertiArray.join("");
        };
        originalProperties[properti] = $(this).data(dataProperti);
      };
      if (noanimation) $(this).data("duration", 1);
      $(this).stop().animate(originalProperties, $(this).data("duration"), $(this).data("easing"));
    }
  };

call in this simple way:

<script type="text/javascript">
$(init);
function init() {
    $(".box").live({
        mouseenter: function() {
            $(this).find(".overlay").stop().transition({opacity: 1}, 700, "easeOutBack");
            $(this).stop().transition({
                width: "250px"
            }, 500, "easeOutBack");
        },
        mouseleave: function() {
            $(this).resetTransition();
            $(this).find(".overlay").resetTransition();
        }
    })
};
</script>

you only declare a class to reset css animation, like:

.resetClass {
    -webkit-transition: all 700ms cubic-bezier(.175, .885,.32,1.275);
    -moz-transition: all 700ms cubic-bezier(.175, .885,.32,1.275);
    -o-transition: all 700ms cubic-bezier(.175, .885,.32,1.275);
    -ms-transition: all 700ms cubic-bezier(.175, .885,.32,1.275);
    transition: all 700ms cubic-bezier(.175, .885,.32,1.275);
}

Awesome plugin :)