web-dev-qa-db-fra.com

Utilisation de la propriété de transformation css dans jQuery

Comment spécifier des contrôles de transformation inter-navigateurs à l'aide de jQuery, chaque navigateur semblant utiliser sa propre méthodologie?

Voici le code que j'utilise pour Firefox mais je n'arrive même pas à le faire fonctionner. Je pense que c’est parce qu’il n’ya aucun moyen de savoir quelle transformation - échelle, rotation, inclinaison - utiliser.

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

            }                
  });
javascriptjquerycss
48
ndesign11

Si vous souhaitez utiliser une fonction de transformation spécifique, il vous suffit d'inclure cette fonction dans la valeur. Par exemple:

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

Deuxièmement, la prise en charge du navigateur s'améliore, mais vous devrez probablement toujours utiliser des préfixes de fournisseur tels que:

$('.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 avec l'exemple: http://jsfiddle.net/jehka/230/

94
Christian Varga

Définir un préfixe -vendor Non pris en charge par les anciens navigateurs peut les amener à lever une exception avec .css. Au lieu de cela, commencez par détecter le préfixe pris en charge:

// 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)

Cela fonctionne dans les anciens navigateurs. J'ai fait scale ici mais vous pouvez le remplacer par n'importe quelle autre transformation que vous souhaitiez.

8
Keith

Si vous utilisez jquery, jquery.transit est une lib très simple et puissante qui vous permet d'effectuer votre transformation tout en gérant la compatibilité entre navigateurs. Cela peut être aussi simple que cela: $("#element").transition({x:'90px'}).

Prenez-le à partir de ce lien: http://ricostacruz.com/jquery.transit/

2
Monero Jeanniton

J'ai commencé à utiliser le script 'sans préfixe' disponible sur http://leaverou.github.io/prefixfree , je n'ai donc pas à me préoccuper des préfixes des vendeurs. Il prend soin de définir le préfixe de fournisseur correct dans les coulisses pour vous. De plus, un plug-in jQuery est également disponible, de sorte que vous pouvez toujours utiliser la méthode .css () de jQuery sans modifications de code. La ligne suggérée associée à l'option sans préfixe serait donc tout ce dont vous avez besoin:

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