How to get -webkit-transition-duration property with jQuery?

Question

Since this sets the transition duration to 1 second: $('#objectID').css('webkit-transition-duration','1s');

I assumed that this would return the current duration value: $('#objectID').css('webkit-transition-duration');

but this is not so.

Answer 1

Try:

 $('#objectID').css('transition-duration','1s'); $('#objectID').css('transition-duration'); 

Answer 2

Simplified answer:

 parseFloat(getComputedStyle(targetElement)['transitionDuration']) 

Answer 3

 function getTransitionProperty(element) { // Note that in some versions of IE9 it is critical that // msTransform appear in this list before MozTransform var properties = [ 'transition', 'WebkitTransition', 'msTransition', 'MozTransition', 'OTransition' ]; var p; while (p = properties.shift()) { if (typeof element.style[p] != 'undefined') { return p; } } return false; } 

This will return the transition value for all major browsers.

Answer 4

I know this answer comes, perhaps too late, but I just parsed it:

 function getTransitionDuration (el, with_delay){ var style=window.getComputedStyle(el), duration = style.webkitTransitionDuration, delay = style.webkitTransitionDelay; // fix miliseconds vs seconds duration = (duration.indexOf("ms")>-1) ? parseFloat(duration) : parseFloat(duration)*1000; delay = (delay.indexOf("ms")>-1) ? parseFloat(delay) : parseFloat(delay)*1000; if(with_delay) return (duration + delay); else return duration; } 

The call getTransitionDuration (el) returns the duration value in ms. The call getTransitionDuration (el, true) returns the duration and delay in ms.

Please note that this is only a web kit, you will need a fix for the property name that matches all browsers.

I also experience a strange error when a 100 ms delay turns into something like 100.00000149011612 when getting a property.

http://jsfiddle.net/z3bKD/2/

Answer 5

Here is the jQuery function, which in milliseconds will return the duration of the transition of either an element or a selector passed to it:

 function getTransitionDuration(elementOrSelector){ var $el, durString, isMS, numberStr, numberNum; $el = $(elementOrSelector); if($el.length === 0 ){ return false; } $el = $($el[0]); // Force just the first item. need more? use .each durString = $el.css('transition-duration').toLowerCase(); isMS = durString.indexOf("ms") >= 0; numberStr = durString.match(/\d/); numberNum = parseInt(numberStr[0], 10); return isMS ? numberNum : numberNum * 1000; }; 

This will only return the duration of the first element in the wrapped set, even if the selector matches more than one element. Need more? use it in . every callback

Return:

• Milliseconds (int)
  • When an element or selector matches an AND element, it has a transition duration.
• 0 (int)
  • When an element or selector matches an AND element, it has either a transition duration or a transition duration of 0.
• false (bool)
  • If an element or selector does not exist or does not contain elements.