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 plugin capable de le faire.
-webkit-border-radius -moz-border-radius
Je pensais à l’origine que quelque chose comme …
$("selector") .css({borderRadius: 10}); .animate({borderRadius: 30}, 900);
…travaillerait. Mais je me suis trompé: Webkit vous permet de définir la valeur des quatre coins via borderRadius
, mais ne vous laissera pas la relire. Ainsi, avec le code ci-dessus, l’animation commencera toujours à 0 au lieu de 10. IE a le même problème. Firefox vous permettra de le relire, donc tout fonctionnera comme prévu.
Eh bien … border-radius a une histoire de 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 tous 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.
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/