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

Question

¿Hay alguna forma en jQuery para animar la propiedad css3 border-radius disponible en los navegadores Webkit y Mozilla?

No he encontrado un complemento que lo haga.

-webkit-border-radius

-moz-border-radius

Answer 1

Originalmente esperaba que algo así como ...

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

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

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

Afortunadamente, hay una solución alternativa: 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 los navegadores más antiguos, puede hacer todo lo posible y usar los nombres con prefijo 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); 

Esto comienza a volverse bastante loco; Lo evitaría si es posible.

Answer 2

Use cssHooks.

Esto te ayudará:

http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/

Enlaces a cssHooks:

https://github.com/brandonaaron/jquery-cssHooks

¡Buena suerte!

Answer 3

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