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

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

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

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

            }                
  });

Ответы

Ответ 1

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

$('.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/

Ответ 2

Настройка префикса -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 здесь, но вы могли бы заменить его любым другим преобразованием, которое вы хотели.

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

            }                
  });

Это решит проблему