Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Extends the jQuery.support object to CSS3 transition
// jQuery.support.transition
// to verify that CSS3 transition is supported (or any of its browser-specific implementations)
$.support.transition = (function(){
var thisBody = document.body || document.documentElement,
thisStyle = thisBody.style,
support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
return support;
})();

briznad commented May 12, 2010

works like a charm. Thanks!

I would put thisStyle.transition !== undefined it is the actual property from the standard and once browsers start supporting it the call would be a little bit faster.

Owner

jonraasch commented May 13, 2011

Just reordered the transitions per marioestrada's comment, and added a browser extension for IE (MsTransition)

maluke commented Dec 14, 2011

Why not (thisStyle.transition || thisStyle.WebkitTransition || thisStyle.MozTransition || thisStyle.MsTransition || thisStyle.OTransition) !== undefined;?

bpierre commented Dec 21, 2011

@maluke because the default value ("") is falsy.

maluke commented Dec 21, 2011

Ah, I see.

fbm351 commented Feb 27, 2013

Receiving Uncaught TypeError: Cannot read property 'webkit' of undefined on pages with this transition being used.

/* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
* ======================================================= */

$.support.transition = (function () {
  var thisBody = document.body || document.documentElement
    , thisStyle = thisBody.style
    , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined

  return support && {
    end: (function () {
      var transitionEnd = "TransitionEnd"
      if ( $.browser.webkit ) {

Uncaught TypeError: Cannot read property 'webkit' of undefined
transitionEnd = "webkitTransitionEnd"
} else if ( $.browser.mozilla ) {
transitionEnd = "transitionend"
} else if ( $.browser.opera ) {
transitionEnd = "oTransitionEnd"
}
return transitionEnd
}())
}
})()

})

The error is likely because jQuery 1.9 has remove support for $.browser

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment