jQuery animate css border-radius propiedad (webkit, mozilla)

¿Existe una forma en jQuery de animar la propiedad css3 border-radius disponible en los navegadores Webkit y Mozilla?

No he encontrado un plugin que lo haga.

-webkit-border-radius

-moz-border-radius
Author: Dan Neely, 2009-06-18
Source

3 answers

Originalmente esperaba que algo así como...

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

...funcionaría. Pero me equivoqué: Webkit te permite establecer el valor para las cuatro esquinas a través de borderRadius, pero no te permite leerlo de nuevo, por lo que con el código anterior, la animación siempre comenzará en 0 en lugar de 10. IE tiene el mismo problema. Firefox te permitirá leerlo de nuevo, para que todo funcione como se espera allí.

Bueno... border-radius tiene una especie de historial de implementación diferencia.

Afortunadamente, hay una solución: solo especifique cada radio de esquina individualmente: 

$("selector")
  .css({
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10 })
  .animate({
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30}, 900);

Tenga en cuenta que si desea mantener la compatibilidad con navegadores más antiguos, puede usar los nombres con prefijo del navegador anterior:

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

Sin embargo, esto comienza a volverse bastante loco; lo evitaría si fuera posible.

 50
Author: Shog9,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-12 16:20:53
 3
Author: Bas Dirks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-13 18:21:17

Solo un consejo, podemos usar una función para detectar el prefijo CSS del navegador Aquí un código de ejemplo.. http://jsfiddle.net/molokoloco/f6Z3D /

 2
Author: molokoloco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-13 18:40:13