How do I get the -webkit-transition-duration property with jQuery?

Question

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

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

but it does not.

Answer 1

Try with:

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

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

Answer 2

Simpler 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 probably too late, but I was just sorting it out:

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;
}

Calling getTransitionDuration(el) will return duration value in ms. Calling getTransitionDuration(el, true) will return duration and delay in ms.

Note that this is webkit only, you would need a fix for the property name to match all the browsers.

I am also experiencing a weird bug, when 100ms delay gets converted to something like 100.00000149011612 when getting the property.

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

Answer 5

Here is a jQuery function that will return, in milliseconds, the transition duration 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 item in the wrapped set, even if the selector matches more than one item. Need more? use this in a .each callback

Returns:

• Milliseconds (int)
  • When the element or selector matches an element AND has a transition duration.
• 0 (int)
  • When the element or selector matches an element AND has either no transition duration or a transition duration of 0.
• false (bool)
  • When the element or selector either doesn't exist or matches no elements.