¿Cómo se modifican las propiedades CSS prefijadas "-webkit-" en jQuery?

$(this).css({ 
    -webkit-transform:'rotate(180deg)', 
    -moz-transform: 'rotate(180deg)', 
    -o-transform: 'rotate(180deg)', 
    -ms-transform: 'rotate(180deg)' 
});

Esto es tirar el error:¿Cómo se modifican las propiedades CSS prefijadas "-webkit-" en jQuery?

Uncaught SyntaxError: Unexpected token -

Realmente espero que no tenga que instalar el plugin de jQuery rotación sólo para esto un caso.

Fuente

2011-10-28 RGBK

si alguna vez se cansa de escribir esos prefijos en sus hojas de estilo, a continuación, comprobar esto http://leaverou.github.com/prefixfree/ –

$(this).css({ 
    '-webkit-transform':'rotate(180deg)', 
    '-moz-transform': 'rotate(180deg)', 
    '-o-transform': 'rotate(180deg)', 
    '-ms-transform': 'rotate(180deg)' 
});

Fuente

2011-10-28 23:15:47 Justin808

citarlos:

$(this).css({ 
    '-webkit-transform': 'rotate(180deg)', 
    '-moz-transform': 'rotate(180deg)', 
    '-o-transform':  'rotate(180deg)', 
    '-ms-transform':  'rotate(180deg)' 
});

Fuente

2011-10-28 23:16:28 Ryan

La nueva manera de la cadera para dar formato comas:

$(this).css({ 
    '-webkit-transform': 'rotate(180deg)' 
    , '-moz-transform': 'rotate(180deg)' 
    , '-o-transform':  'rotate(180deg)' 
    , '-ms-transform':  'rotate(180deg)' 
});

Fuente

2011-10-29 02:29:37 chovy

¿Hay alguna razón para esto? Parece tonto, pero la mayoría de las cosas hipster lo hacen :) – Dakine83

Me gusta este formato, ya que le permite cortar y pegar líneas de código sin tener que agregar o quitar comas de la línea anterior. – Bassam

+15

Excepto por la primera línea, mientras que el formato estándar le permite cortar y pegar sin agregar o eliminar comas ... excepto la última línea. Si no está roto ... – Dakine83

sólo para añadir un poco más de variedad a la lista de respuestas, también se puede hacer

$(this).css({ 
    WebkitTransform: 'rotate(180deg)', 
    MozTransform: 'rotate(180deg)', 
    OTransform:  'rotate(180deg)', 
    msTransform:  'rotate(180deg)', 
    transform:  'rotate(180deg)' 
});

Los guiones en los nombres de las propiedades CSS son estafa verted to camelCase en JS para compatibilidad, así que cuando usas '-webkit-transform' (como en los ejemplos anteriores), jQuery simplemente lo convierte a WebkitTransform internamente.

Fuente

2012-06-16 20:51:26 lucideer

Solo un pequeño añadido a las respuestas actuales: si usa jQuery 1.8, no tiene que agregar los prefijos usted mismo. jQuery agregará automáticamente el prefijo apropiado para usted.

Eso significa que el código será suficiente:

$(this).css('transform', 'rotate(180deg)');

Usted no tendrá que preocuparse por la adición de nuevos prefijos o la eliminación de ellos si el navegador adaptado la propiedad sin prefijo. :)

Here es una demostración en vivo. Si visita la página con un navegador WebKit e inspecciona el cuerpo, puede ver que jQuery agregó -webkit-transform: rotate(180deg); como estilo.

Tome un vistazo a la automática CSS anteponiendo sección aquí: http://blog.jquery.com/2012/08/09/jquery-1-8-released/

Fuente

2012-06-23 15:55:32

¿Cómo se modifican las propiedades CSS prefijadas "-webkit-" en jQuery?

Respuesta

Cuestiones relacionadas