public
Last active — forked from aza/CSS Animation for jQuery.js

jQuery CSS Transition Plugin + Opera Support

  • Download Gist
CSS Animation for jQuery.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
(function($){
var rupper = /([A-Z])/g;
 
// ----------
// Function: stopCssAnimation
// Stops an animation in its tracks!
$.fn.stopCssAnimation = function(){
this.each(function(){
// When you remove the CSS Transition properties
// it doesn't just end the animation where it was,
// instead it jumps the animation to the end state.
// Thus, to stop an animation, you first have to get
// its current computed values, remove the transition
// properties, and then finally set the elements
// values appropriatly.
// Get the computed values of the animated properties
var $el = $(this);
var props = $el.data("cssAnimatedProps");
var cStyle = window.getComputedStyle(this, null);
var cssValues = {};
for(var prop in props){
prop = prop.replace( rupper, "-$1" ).toLowerCase();
cssValues[prop] = cStyle.getPropertyValue(prop);
}
// Remove the CSS Transition CSS
$el.css({
'-moz-transition-property': 'none',
'-moz-transition-duration': '',
'-moz-transition-timing-function': '',
'-webkit-transition-property': 'none',
'-webkit-transition-duration': '',
'-webkit-transition-timing-function': '',
'-o-transition-property': 'none',
'-o-transition-duration': '',
'-o-transition-timing-function': ''
});
// Set the saved computed properties
for( var prop in cssValues ){
$el.css(prop, cssValues[prop]);
}
// Cancel any onComplete function
$el.data("cssAnimatedProps", null);
var timeoutId = $el.data("cssTimeoutId");
if( timeoutId != null ) {
clearTimeout(timeoutId);
$el.data("cssTimeoutId", null);
}
});
};
 
// ----------
// Function: animateWithCSS
// Uses CSS transitions to animate the element.
//
// Parameters:
// Takes the same properties as jQuery's animate function.
//
// The only difference is that the easing paramater can now be:
// bounce, swing, linear, ease-in, ease-out, cubic-bezier, or
// manually defined as cubic-bezier(x1,y1,x2,y2);
$.fn.animateWithCss = function(props, speed, easing, callback) {
var optall = jQuery.speed(speed, easing, callback);
if ( jQuery.isEmptyObject( props ) ) {
return this.each( optall.complete );
}
var easings = {
bounce: 'cubic-bezier(0.0, 0.35, .5, 1.3)',
linear: 'linear',
swing: 'ease-in-out',
};
optall.easing = optall.easing || "swing";
optall.easing = easings[optall.easing] ? easings[optall.easing] : optall.easing;
// The latest versions of Firefox do not animate from a non-explicitly set
// css properties. So for each element to be animated, go through and
// explicitly define 'em.
this.each(function(){
$(this).data("cssAnimatedProps", props);
var cStyle = window.getComputedStyle(this, null);
for(var prop in props){
prop = prop.replace( rupper, "-$1" ).toLowerCase();
$(this).css(prop, cStyle.getPropertyValue(prop));
}
});
this.css({
'-moz-transition-property': 'all', // TODO: just animate the properties we're changing
'-moz-transition-duration': optall.duration + 'ms',
'-moz-transition-timing-function': optall.easing,
'-webkit-transition-property': 'all', // TODO: just animate the properties we're changing
'-webkit-transition-duration': optall.duration + 'ms',
'-webkit-transition-timing-function': optall.easing,
'-o-transition-property': 'all', // TODO: just animate the properties we're changing
'-o-transition-duration': optall.duration + 'ms',
'-o-transition-timing-function': optall.easin
});
this.css(props);
 
var self = this;
var timeoutId = setTimeout(function() {
self.css({
'-moz-transition-property': 'none',
'-moz-transition-duration': '',
'-moz-transition-timing-function': '',
'-webkit-transition-property': 'none',
'-webkit-transition-duration': '',
'-webkit-transition-timing-function': '',
'-o-transition-property': 'none',
'-o-transition-duration': '',
'-o-transition-timing-function': ''
});
self.data("cssAnimatedProps", null);
self.data("cssTimeoutId", null);
 
if(jQuery.isFunction(optall.complete))
optall.complete.apply(self);
}, optall.duration);
this.data( "cssTimeoutId", timeoutId );
return this;
}
 
})(jQuery);

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.