Как получить свойство -webkit-transition-duration с помощью jQuery?

Question

Поскольку это устанавливает длительность перехода равной 1 секунде: $('#objectID').css('webkit-transition-duration','1s');

Я предполагал, что это вернет текущее значение продолжительности: $('#objectID').css('webkit-transition-duration');

, но это не так.

Answer 1

Более простой ответ:

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

Answer 2

Попробуйте с:

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

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

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

Это вернет значение перехода для всех основных браузеров.

Answer 4

Вот функция jQuery, которая возвращает в миллисекундах длительность перехода элемента или селектора, переданного ему:

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

Это вернет только продолжительность первого элемента в упакованном наборе, даже если селектор соответствует более чем одному элементу. Нужно больше? используйте это в .each callback

Возвращает:

• Миллисекунды (int)
  • Когда элемент или селектор соответствует элементу И имеет длительность перехода.
• 0 (int)
  • Когда элемент или селектор соответствует элементу AND, он не имеет ни длительности перехода, ни длительности перехода 0. 0. 1023 *
• false (bool)
  • Когда элемент или селектор либо не существует, либо не соответствует ни одному из элементов.

Answer 5

Я знаю, что этот ответ приходит, вероятно, слишком поздно, но я просто разбирался с ним:

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

Вызов getTransitionDuration (el) вернет значение длительности в мс.Вызов getTransitionDuration (el, true) вернет длительность и задержку в мс.

Обратите внимание, что это только webkit, вам потребуется исправление для имени свойства, соответствующего всем браузерам.

Я также испытываю странную ошибку, когда задержка в 100 мс при получении свойства преобразуется в нечто вроде 100.00000149011612.

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