Обнаружение изменений CSS-преобразования в разных браузерах с использованием jQuery

Question

Мне нужно определить, изменилось ли свойство CSS-преобразования с помощью jQuery.В Firebug CSS-свойство, которое я ищу, чтобы обнаружить изменения, отображается следующим образом:

-moz-transform: translate(-0px, 0px)

Мне нужно определить, изменилось ли это свойство на другое свойство пикселя.Например:

-moz-transform: translate(-100px, 0px)

Подробнее:

В конечном итоге я пытаюсь обнаружить переход между кликом и перетаскиванием следующей демонстрации.

http://cubiq.org/dropbox/iscroll4/examples/carousel/

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

Answer 1

Вы можете использовать Modernizr для создания префикса Vender, а затем вы можете использовать .split(), чтобы отделить вывод от .css() и получить нужные значения.

Вот метод получения свойства с префиксом:

if (Modernizr.csstransforms3d) {
    trans_key = Modernizr.prefixed('transform').replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');

} else if (Modernizr.csstransforms) {
    trans_key = Modernizr.prefixed('transform').replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');
}

Источник: http://www.modernizr.com/docs/#prefixed

Тогда вы можете использовать .css(), чтобы получить свойство -vender-transform:

var matrix = $('#element-id').css(trans_key);//output = matrix(1, 0, 0, 1, 100px, 0px)

Тогда, наконец, вы можете .split() значение matrix в нечто полезное:

var data = matrix.replace(')', '').split(',');//data[4]='100px', data[5]='0px'

Вот демоверсия: http://jsfiddle.net/7Yz8B/