jQuery animate css border-radius property (webkit, mozilla)
-
06-07-2019 - |
Domanda
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
Soluzione
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.
Altri suggerimenti
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!
Juste un consiglio, possiamo usare una funzione per rilevare il prefisso CSS del browser Ecco un codice di esempio. http://jsfiddle.net/molokoloco/f6Z3D/