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?