Extends the jQuery.support object to CSS3 transition

jQuery.support-transition.js

// 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; 
})();

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.

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

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

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

Ah, I see.

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

I am getting the TypeError error in the console
TypeError: can't convert undefined to object

Is there any workaround for that?

I am getting the TypeError error in the console
TypeError: can't convert undefined to object

Is there any workaround for that?

Me too, does this has something to do with the jquery version ?

Not sure if that’s the case. I tried to change the version to 1.9 and the latest version from 1.12 but it didn't help.