Использование css transform свойство в jQuery

Как вы можете указать элементы управления кросс-браузерным преобразованием, используя jQuery, поскольку каждый браузер использует свою собственную методологию?

Вот код, который я использую для Firefox, но я даже не могу заставить его работать. Я думаю, это потому, что нет способа определить, какое преобразование & # x2013; масштабировать, поворачивать, наклонять & # x2013; использовать.

$(".oSlider-rotate").slider({
     min: 10,
     max: 74,
     step: .01,
     value: 24,
     slide: function(e,ui){
                 $('.user-text').css('transform', ui.value)

            }                
  });
 elclanrs30 мая 2012 г., 01:37
Взгляни наjQuery CSS Hooks

Ответы на вопрос(4)

jquery.transit - это очень простая и мощная библиотека, которая позволяет вам выполнять преобразование, одновременно работая с кросс-браузерной совместимостью. Это может быть так просто, как это:$("#element").transition({x:'90px'}).

Возьми это по этой ссылке:http://ricostacruz.com/jquery.transit/

-vendor Префикс, который не поддерживается в старых браузерах, может привести к возникновению исключения с.css, Вместо этого сначала определите поддерживаемый префикс:

// Start with a fall back
var newCss = { 'zoom' : ui.value };

// Replace with transform, if supported
if('WebkitTransform' in document.body.style) 
{
    newCss = { '-webkit-transform': 'scale(' + ui.value + ')'};
}
// repeat for supported browsers
else if('transform' in document.body.style) 
{
    newCss = { 'transform': 'scale(' + ui.value + ')'};
}

// Set the CSS
$('.user-text').css(newCss)

Это работает в старых браузерах. Я сделалscale здесь, но вы можете заменить его любым другим преобразованием, которое вы хотели.

 06 янв. 2016 г., 20:09
@PandaWood существуют оба свойства
 28 июл. 2014 г., 03:09
Я заметил, что свойство начинается со строчной буквы "w". - & GT; то есть «webkitTransform»; но все равно работает с заглавными буквами, как-то
Решение Вопроса

то все, что вам нужно сделать, это включить эту функцию в значение. Например:

$('.user-text').css('transform', 'scale(' + ui.value + ')');

Во-вторых, поддержка браузеров улучшается, но вам, вероятно, все еще потребуется использовать префиксы поставщиков, например:

$('.user-text').css({
  '-webkit-transform' : 'scale(' + ui.value + ')',
  '-moz-transform'    : 'scale(' + ui.value + ')',
  '-ms-transform'     : 'scale(' + ui.value + ')',
  '-o-transform'      : 'scale(' + ui.value + ')',
  'transform'         : 'scale(' + ui.value + ')'
});

jsFiddle с примером:http://jsfiddle.net/jehka/230/

 30 мая 2012 г., 02:00
Пояснение: ОП написалcross browser преобразования.
 30 мая 2012 г., 01:57
Это влияет только на IE, на который мы все равно не нацеливаемся: p
 30 мая 2012 г., 02:03
Удаление запятой не делает ее полностью кросс-браузерной, ни-moz ни-webkit префиксы вендоров применяются к IE. Мой код служит примеромhow применить свойства. Если вам это не нравится, не стесняйтесь написать свой собственный ответ :)
 30 мая 2012 г., 01:49
Я обновляю jsFiddle на / 2 /, в котором удалена лишняя запятая.
 30 мая 2012 г., 03:10
этоSO answer объясняет, что дополнительная запятая противоречит спецификации ES5 в отношении кросс-браузерного синтаксиса. Просто говорю. :п

http://leaverou.github.io/prefixfree поэтому мне не нужно заботиться о префиксах поставщиков. Он аккуратно позаботится о том, чтобы установить правильный префикс продавца за кулисами для вас. Кроме того, также доступен плагин jQuery, так что можно по-прежнему использовать метод jQuery .css () без изменений кода, так что предложенная строка в сочетании с префиксом будет всем, что вам нужно:

$('.user-text').css('transform', 'scale(' + ui.value + ')');

Ваш ответ на вопрос