jQuery animate css border-radius property (webkit, mozilla)

Question

Esiste un modo in jQuery per animare la proprietà css3 border-radius disponibile nei browser Webkit e Mozilla?

Non ho trovato un plugin che lo farà.

-webkit-border-radius

-moz-border-radius

Answer 1

Inizialmente mi aspettavo che qualcosa del genere ...

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

... funzionerebbe. Ma ho sbagliato: Webkit ti consente di impostare il valore per tutti e quattro gli angoli tramite borderRadius , ma non ti lascerà rileggerlo, quindi con il codice sopra, l'animazione inizierà sempre a 0 anziché a 10. IE ha lo stesso problema. Firefox ti consente di rileggerlo, quindi tutto funziona come previsto lì.

Bene ... border-radius ha una sorta di storia di differenze di implementazione.

Fortunatamente, c'è una soluzione: basta specificare ogni raggio d'angolo singolarmente:

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

Tieni presente che se desideri mantenere la compatibilità con i browser più vecchi, puoi fare tutto e usare i vecchi nomi con prefisso browser:

$("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); 

Questo però inizia a diventare piuttosto pazzo; Lo eviterei se possibile.

Answer 2

Usa cssHooks.

Questo ti aiuterà:

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

Collegamenti a cssHooks:

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

Buona fortuna!

Answer 3

Juste un consiglio, possiamo usare una funzione per rilevare il prefisso CSS del browser Ecco un codice di esempio. http://jsfiddle.net/molokoloco/f6Z3D/