Skip to content

Instantly share code, notes, and snippets.

@thekiur
Last active December 29, 2015 10:29
Show Gist options
  • Save thekiur/7657061 to your computer and use it in GitHub Desktop.
Save thekiur/7657061 to your computer and use it in GitHub Desktop.
jQuery transition plugin with fallback to animate()
(function ( $ ) {
// What: a jQuery plugin for CSS3 transitions with animate() fallback
// Author: kiur@node.ee
// License: Public Domain
var CSS3_TRANS_SUPPORT = (function() {
var b = document.body || document.documentElement;
var s = b.style;
var p = 'transition';
if (typeof s[p] == 'string') return true;
v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
p = p.charAt(0).toUpperCase() + p.substr(1);
for (var i=0; i<v.length; i++) {
if (typeof s[v[i] + p] == 'string') return true;
}
return false;
})();
$.fn.transition = function(newCSS, context, duration, easing, callback) {
if(!CSS3_TRANS_SUPPORT) {
this.animate(newCSS, duration, callback);
return;
}
var self = this,
context = context || 'all',
duration = duration || 500,
easing = easing || 'linear',
key, val;
var oldTransitionStyle = {
'-webkit-transition': this.css('-webkit-transition'),
'-moz-transition': this.css('-moz-transition'),
'-ms-transition': this.css('-ms-transition'),
'-o-transition': this.css('-o-transition'),
'transition': this.css('transition')
}
var transitionStyle = context + ' ' + duration + 'ms ' + easing;
for (key in oldTransitionStyle) {
if(oldTransitionStyle.hasOwnProperty(key)) {
this.css(key, transitionStyle);
}
}
for (key in newCSS) {
if(newCSS.hasOwnProperty(key)) {
if(newCSS[key].indexOf('+=') === 0) {
newCSS[key] = parseInt(this.css(key)) + parseInt(newCSS[key].substr(2));
}
else if(newCSS[key].indexOf('-=') === 0) {
newCSS[key] = parseInt(this.css(key)) - parseInt(newCSS[key].substr(2));
}
}
}
this.css(newCSS);
setTimeout(function() {
self.css(oldTransitionStyle);
callback && callback();
}, duration);
return this;
}
}( jQuery ));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment