jQuery animado CSS border-radio (webkit, Mozilla)

Question

¿Hay alguna manera en jQuery para animar la propiedad CSS3 la frontera de radio disponible en Webkit y navegadores Mozilla?

No he encontrado un complemento que lo haga.

-webkit-border-radius 

-moz-border-radius 

Answer 1

que esperaba originalmente que algo así ...

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

... funcionaría. Pero, estaba equivocado: Webkit le permite establecer el valor de las cuatro esquinas a través de borderRadius, pero no le permitirá leerlo, 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 permite leerlo, así que todo funciona como se esperaba allí.

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

Afortunadamente, hay una solución alternativa: sólo tiene que especificar cada radio de esquina de forma individual:

$("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 antiguos, se puede ir sin cuartel y utilizar el viejo browser- nombres prefijados:

$("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 ponerse bastante loco; Lo evitaría si es posible.

Answer 2

Utilice cssHooks.

Esto le ayudará a cabo:

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

Enlaces a los cssHooks:

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

Buena suerte!

Answer 3

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