web-dev-qa-db-fra.com

Propriété jQuery animate 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 pour le faire.

-webkit-border-radius

-moz-border-radius
jqueryjquery-animatebordercss3
30
user113716

Je m'attendais à l'origine à quelque chose comme ...

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

...travaillerait. Mais j'avais tort: ​​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 will vous permet de le relire, donc tout fonctionne comme prévu là-bas.

Eh bien ... border-radius a en quelque sorte un historique de différences d'implémentation.

Heureusement, il existe une solution: spécifiez simplement chaque rayon d'angle 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 anciens navigateurs, vous pouvez tout faire et utiliser les anciens noms préfixés par le 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.

52
Shog9

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!

3
Bas Dirks

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

2
molokoloco