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

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

Answer 1

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.

Answer 2

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!

Answer 3

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/