jQuery animer la propriété css border-radius (webkit, mozilla)

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.

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/