jQuery animate propriété CSS border-radius (webkit, mozilla)

Question

Y at-il une façon jQuery pour animer le CSS3 border-radius biens disponibles dans les navigateurs Mozilla et WebKit?

Je n'ai pas trouvé de plugin qui le fera.

-webkit-border-radius 

-moz-border-radius 

Answer 1

Je était initialement prévu que quelque chose comme ...

$("selector") 
    .css({borderRadius: 10}); 
    .animate({borderRadius: 30}, 900); 

... fonctionnerait. Mais, j'avais tort: ​​Webkit vous permet de définir la valeur pour les quatre coins via borderRadius, mais ne vous laissera pas le lire - donc avec le code ci-dessus, l'animation commencera toujours à 0 au lieu de 10. IE a le même problème. Firefox vous permet de le relire, donc tout fonctionne comme prévu.

Bien ... border-radius a en quelque sorte un historique des différences de mise en œuvre.

Heureusement, il y a un travail autour: il suffit de spécifier chaque rayon d'angle individuel:

$("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 anciens navigateurs, vous pouvez aller tous azimuts et utiliser l'ancien browser- noms préfixés:

$("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 si; 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

un conseil Juste, nous pouvons utiliser une fonction pour détecter le préfixe CSS du navigateur Voici un exemple de code .. http://jsfiddle.net/molokoloco/f6Z3D/