jQuery animer la propriété css border-radius (webkit, mozilla)
-
06-07-2019 - |
Question
Existe-t-il un moyen dans jQuery d'animer la propriété css3 border-radius disponible dans les navigateurs Webkit et Mozilla?
Je n'ai pas trouvé de plug-in capable de le faire.
-webkit-border-radius
-moz-border-radius
La solution
Au départ, je m'attendais à quelque chose comme ...
$("selector")
.css({borderRadius: 10});
.animate({borderRadius: 30}, 900);
... fonctionnerait. Mais je me suis trompé: Webkit vous permet de définir la valeur pour les quatre coins via borderRadius
, mais ne vous laissera pas la relire - donc avec le code ci-dessus, l'animation commencera toujours à 0 au lieu de 10. IE a le même problème. Firefox va vous permettre de le relire, donc tout fonctionne comme prévu.
Eh bien ... border-radius a en quelque sorte un historique des différences de mise en œuvre.
Heureusement, il existe un moyen de contourner le problème: il suffit de spécifier chaque rayon de coin individuellement:
$("selector")
.css({
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10 })
.animate({
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30}, 900);
Notez que si vous souhaitez conserver la compatibilité avec les navigateurs plus anciens, vous pouvez utiliser toutes les options et utiliser les anciens noms préfixés du navigateur:
$("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);
Cela commence à devenir assez fou cependant; Je l'éviterais si possible.
Autres conseils
Utilisez cssHooks.
Cela vous aidera:
http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/ >
Liens vers les cssHooks:
https://github.com/brandonaaron/jquery-cssHooks
Bonne chance!
Juste un conseil, nous pouvons utiliser une fonction pour détecter le préfixe CSS du navigateur Voici un exemple de code. http://jsfiddle.net/molokoloco/f6Z3D/