Skip to content

Instantly share code, notes, and snippets.

Embed
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

This comment has been minimized.

Copy link

briznad commented May 12, 2010

works like a charm. Thanks!

@marioestrada

This comment has been minimized.

Copy link

marioestrada commented Apr 1, 2011

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.

@jonraasch

This comment has been minimized.

Copy link
Owner Author

jonraasch commented May 13, 2011

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

@maluke

This comment has been minimized.

Copy link

maluke commented Dec 14, 2011

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

@bpierre

This comment has been minimized.

Copy link

bpierre commented Dec 21, 2011

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

@maluke

This comment has been minimized.

Copy link

maluke commented Dec 21, 2011

Ah, I see.

@fbm351

This comment has been minimized.

Copy link

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

})

@rtpHarry

This comment has been minimized.

Copy link

rtpHarry commented Jul 26, 2013

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

@msshohan

This comment has been minimized.

Copy link

msshohan commented Aug 26, 2019

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

Is there any workaround for that?

@ltujiba

This comment has been minimized.

Copy link

ltujiba commented Sep 11, 2019

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 ?

@msshohan

This comment has been minimized.

Copy link

msshohan commented Oct 7, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.