jQuery belebte CSS border-radius Eigenschaft (webkit, mozilla)

Question

Gibt es eine Möglichkeit in jQuery animieren der css3 border-radius Immobilien in Webkit und Mozilla-Browser?

Ich habe ein Plugin nicht gefunden, die es tun werden.

-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 war falsch: Webkit kann Sie auf gesetzt den Wert für alle vier Ecken über borderRadius, aber lassen Sie nicht es wieder lesen - so mit dem obigen Code, wird die Animation immer bei 0 beginnen anstelle von 10 IE hat das gleiche Problem. Firefox wird können Sie es zurück zu lesen, so funktioniert alles wie es erwartet wird.

Nun ... border-radius hat eine Art von Geschichte der Umsetzung Unterschiede.

Zum Glück gibt es eine Behelfslösung: nur jeden Eckenradius angeben individuell:

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

Beachten Sie, dass die Kompatibilität mit älteren Browsern erhalten möchten, können Sie all-out gehen und die alten Browser-Präfix Namen verwenden:

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

Das beginnt allerdings ziemlich verrückt zu bekommen; Ich würde es, wenn möglich, vermeiden.

Answer 2

Mit cssHooks.

Dies wird Ihnen helfen aus:

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

Links zu dem cssHooks:

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

Viel Glück!

Answer 3

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