Jak modyfikujesz "-webkit-" wstępnie ustawione właściwości CSS w jQuery?

Question

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

To rzuca błąd:

Uncaught SyntaxError: Unexpected token -

naprawdę mam nadzieję, że nie trzeba instalować wtyczki jQuery Obrót tylko dla tej jednej instancji.

Answer 1

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

Answer 2

Cytat je:

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

Answer 3

Nowy sposób hip formatować przecinkami:

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

Answer 4

Wystarczy dodać trochę więcej różnorodności do listy odpowiedzi, można też zrobić

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

Kreski w nazwach właściwości CSS są niezgodne przechodzi na camelCase w JS dla kompatybilności., więc kiedy używasz "-webkit-transform" (jak w powyższych przykładach), jQuery po prostu konwertuje to do WebkitTransform wewnętrznie.

Answer 5

Tylko niewielki dodatek do obecnych odpowiedzi: Jeśli używasz jQuery 1.8, nie musisz samodzielnie dodawać prefiksów. jQuery automatycznie doda odpowiedni prefiks dla ciebie.

Oznacza to, że kod ten będzie wystarczająco:

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

Nie musisz martwić się o dodanie nowych prefiksów lub ich usunięcia, jeżeli przeglądarka dostosowany własność bez prefiksu. :)

Here - wersja demonstracyjna na żywo. Jeśli odwiedzasz stronę za pomocą przeglądarki WebKit Browser i sprawdzasz ciało, możesz zobaczyć, że jQuery dodaje styl jako -webkit-transform: rotate(180deg);.

Spójrz na Automatic CSS poprzedzając sekcję tutaj: http://blog.jquery.com/2012/08/09/jquery-1-8-released/