jQuery animate css border-radius (webkit, mozilla)

¿Hay alguna 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 

Originalmente esperaba que algo como …

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

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

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

Afortunadamente, hay una solución alternativa: simplemente 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 antiguos con prefijo de navegador:

 $("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 sin embargo; Lo evitaría si fuera posible.

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/

    Intereting Posts