Destroy transit js on object

Question

I've recently been trying out Transit JS for some animation on thumbnails. It's not essential i use transit js, which could be a good thing as i can't find a way to destroy the animation call on my div if i need to.

Basically i am looking to try and disable the animations for mobile, as there is no hover on mobile, it's pointless leaving this in there. But going through the documentation, i can't seem to find a way to stop the process.

My code looks like this:

  $(".spark_burst").css({ scale: 0 });

  $("a.trigger").bind('mouseenter play', function() {
    $(this).find(".spark_burst").transition({
        opacity: 0.7, scale: 2,
        duration: 400,
        easing: 'in',
        queue:false,
        complete: function() {  }
      });
    $(this).find(".targeting").transition({
      y: 0,
      x: 235,
      easing: 'in',
      queue:false,
      duration: 200 
    });
  }).bind('mouseleave reset', function() {
            console.log("hover out");
      $(this).find(".spark_burst").transition({
        opacity: 0, scale: 0,
        duration: 400,
        easing: 'out',
        queue:false,
        complete: function() {  }
      });
      $(this).find(".targeting").transition({
        y: 0,
        x: 0,
        easing: 'snap',
        queue:false,
        duration: 200 
      });
  });

I've tried to unbind the event like this:

$(window).resize(function(){  
  if ($("#all_spark").css("marginRight") == "0px" ){

    console.log("0 pixels");
    $("a.trigger").unbind( "mouseover mouseout play reset" );

  }
});

My thought process here was set a resize function to watch for when a mobile style is trigger on the parent, then unbind the mouseover and mouseout triggers. But this was a shot in the dark and doesn't work so i am guessing this is pure rubbish on my part.

Any ideas?

Answer 1

So you bind mouseenter and mouseleave events to the trigger,

and unbind mouseover and mouseout events, but it does not work.....

....

BUT WAIT !!! THEY ARE TOTALLY DIFFERENT EVENTS!

mouseenter is not the same as mouseover,

and

mouseleave is not the same as mouseout,

to unbind a event, you need use the same event name :)

Tested with this transit JS in this demo: http://jsfiddle.net/JuKqK/

Hope it helps.