jQuery animowania css właściwość border-radius (Webkit, Mozilla)

Question

Czy istnieje sposób w jQuery animowanie właściwości dostępne w Webkit i Mozilla CSS3 border-radius?

Nie znalazłem wtyczki, która to zrobi.

-webkit-border-radius 

-moz-border-radius 

Answer 1

ja pierwotnie zakładano, że coś takiego ...

$("selector") 
    .css({borderRadius: 10}); 
    .animate({borderRadius: 30}, 900); 

... będzie działać. Ale, myliłem się: Webkit pozwala ci na ustawić wartość dla wszystkich czterech rogów poprzez borderRadius, ale nie pozwoli ci go przeczytać - więc z powyższym kodem animacja zawsze zacznie się od 0 zamiast 10. IE ma ten sam problem. Firefox będzie pozwoli Ci go przeczytać, więc wszystko działa zgodnie z oczekiwaniami.

Cóż ... border-radius ma historię różnic w implementacji.

Na szczęście, istnieje obejście: wystarczy podać każdą promień narożnika indywidualnie:

$("selector") 
    .css({ 
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10 }) 
    .animate({ 
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30}, 900); 

Pamiętaj, że jeśli chcesz, aby zachować zgodność ze starszymi przeglądarkami, można przejść całą-out i używać starego Browser- prefiksowane nazwy:

$("selector") 
    .css({ 
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10, 
    WebkitBorderTopLeftRadius: 10, 
    WebkitBorderTopRightRadius: 10, 
    WebkitBorderBottomLeftRadius: 10, 
    WebkitBorderBottomRightRadius: 10, 
    MozBorderRadius: 10 
    }) 
    .animate({ 
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30, 
    WebkitBorderTopLeftRadius: 30, 
    WebkitBorderTopRightRadius: 30, 
    WebkitBorderBottomLeftRadius: 30, 
    WebkitBorderBottomRightRadius: 30, 
    MozBorderRadius: 30 
    }, 900); 

To jednak zaczyna być szalone; Unikałbym go, jeśli to możliwe.

Answer 2

Użyj cssHooks.

Będzie to pomóc:

http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/

Linki do cssHooks:

https://github.com/brandonaaron/jquery-cssHooks

Powodzenia!

Answer 3

Juste rada, możemy użyć funkcji wykrywania CSS przeglądarki prefiks Oto przykładowy kod .. http://jsfiddle.net/molokoloco/f6Z3D/