Od kiedy pisałem artykuł o CSS CIRCLES troszkę się pozmieniało. Mamy FireFoxa 5, Opere 11, Chrome 12, Internet Explorer 9 ogólnie, lepszy świat:-) Jak się okazało to pójście w przyszłość zdeaktualizowało moją technikę, ale na szczęście update już jest dostępny pod powyższym linkiem. Ogólnie zmiany są takie, że unormował się sposób animacji.

Zmiany to:

  • Używamy notacji CSS 3
  • Ustawiamy style inline dla każdego rogu, aby przeglądarka nie resetowała naszych ustawień podczas animacji
  • Animujemy każdy róg osobno(w jednej animacji, ale rozpisujemy kolejno).
  • I śmiga :-)!

Przykład:

$(this).css({
 borderTopLeftRadius: '0',
 borderTopRightRadius: '0',
 borderBottomLeftRadius: '0',
 borderBottomRightRadius: '0'})
.animate({
 borderTopLeftRadius: '50',
 borderTopRightRadius: '50',
 borderBottomLeftRadius: '50',
 borderBottomRightRadius: '50'
},500);

Żywy przykład w oryginalnym artykule.