Propiedad jQuery animate css border-radius (webkit, mozilla)
-
06-07-2019 - |
Pregunta
¿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
Solución
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.
Otros consejos
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!
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/