jQuery CSS border-radius Eigenschaft animieren (Webkit, mozilla)

Question

Gibt es eine Möglichkeit in jQuery die css3 border-radius Eigenschaft in Webkit und Mozilla-Browser zu animieren?

Ich habe kein Plugin gefunden, das es tun wird.

-webkit-border-radius 

-moz-border-radius 

Answer 1

Ich erwartete ursprünglich, dass so etwas wie ...

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

... funktionieren würde. Aber ich habe mich geirrt: Webkit erlaubt dir den Wert für alle vier Ecken über borderRadius einzustellen, aber lass dich nicht zurücklesen - also mit dem obigen Code beginnt die Animation immer bei 0 statt 10. IE hat das gleiche Problem. Firefox wird lassen Sie es wieder lesen, so funktioniert alles wie erwartet dort.

Nun ... Border-Radius hat eine Art von Geschichte der Umsetzung Unterschiede.

Glücklicherweise gibt es eine Behelfslösung: nur jeder Eckenradius individuell festlegen:

$("selector") 
    .css({ 
    borderTopLeftRadius: 10, 
    borderTopRightRadius: 10, 
    borderBottomLeftRadius: 10, 
    borderBottomRightRadius: 10 }) 
    .animate({ 
    borderTopLeftRadius: 30, 
    borderTopRightRadius: 30, 
    borderBottomLeftRadius: 30, 
    borderBottomRightRadius: 30}, 900); 

Beachten Sie, dass, wenn Sie Kompatibilität mit älteren Browsern erhalten möchten, können Sie all-out gehen und die alte browser- verwenden vorangestellte Namen:

$("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); 

Dies beginnt jedoch ziemlich verrückt zu werden; Ich würde es nach Möglichkeit vermeiden.

Answer 2

Verwenden Sie cssHooks.

Dies hilft Ihnen aus:

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

Links zu den cssHooks:

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

Viel Glück!

Answer 3

Juste eine Beratung, können wir eine Funktion verwenden, um Browser CSS Präfix Hier ist ein Beispielcode zu erkennen .. http://jsfiddle.net/molokoloco/f6Z3D/