jQuery propriedade animado css fronteira de raio (-webkit, Mozilla)

Question

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

Answer 1

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.

Answer 2

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!

Answer 3

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/