jQuery propriedade animado css fronteira de raio (-webkit, Mozilla)
-
06-07-2019 - |
Pergunta
Existe uma maneira em jQuery para animar o CSS3 border-radius propriedade disponível em Webkit e Mozilla?
Eu não encontrei um plugin que irá fazê-lo.
-webkit-border-radius
-moz-border-radius
Solução
Eu esperava originalmente que algo como ...
$("selector")
.css({borderRadius: 10});
.animate({borderRadius: 30}, 900);
... iria funcionar. Mas, eu estava errado: Webkit permite que você set o valor para todos os quatro cantos via borderRadius
, mas não vai deixar você lê-lo de volta - assim com o código acima, a animação será sempre começam em 0 em vez de 10. IE tem o mesmo problema. Firefox irá que você lê-lo de volta, então tudo funciona como esperado lá.
Bem ... border-radius tem uma espécie de história de diferenças de implementação.
Felizmente, há uma solução alternativa: basta especificar cada raio de canto individualmente:
$("selector")
.css({
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10 })
.animate({
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30}, 900);
Note que, se você deseja manter a compatibilidade com navegadores mais antigos, você pode ir all-out e usar os nomes antigos prefixo 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);
Este começa a ficar muito louco embora; I evitar se possível.
Outras dicas
Use cssHooks.
Isso irá ajudá-lo:
http://www.webmuse.co.uk/articles/border_radius_csshook_with_internet_explorer_support/
Links para os cssHooks:
https://github.com/brandonaaron/jquery-cssHooks
Boa sorte!
Juste um conselho, podemos usar uma função para detectar prefixo CSS do navegador Aqui um exemplo de código .. http://jsfiddle.net/molokoloco/f6Z3D/