Свойство jQuery animate css border-radius (webkit, mozilla)

Question

Есть ли способ в jQuery анимировать свойство border-radius css3, доступное в браузерах Webkit и Mozilla?

Я не нашел плагин, который будет это делать.

-webkit-border-radius

-moz-border-radius

Answer 1

Изначально я ожидал, что что-то вроде ...

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

... будет работать. Но я ошибся: Webkit позволяет установить значение для всех четырех углов с помощью borderRadius , но не позволит вам прочитать его обратно - так с кодом выше, анимация всегда начинается с 0 вместо 10. IE имеет ту же проблему. Firefox будет позволять вам читать его обратно, поэтому там все работает как положено.

Ну ... у border-radius есть своего рода история различий в реализации.

К счастью, есть обходной путь: просто укажите каждый угловой радиус отдельно:

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

Обратите внимание, что если вы хотите сохранить совместимость со старыми браузерами, вы можете сделать все возможное и использовать старые имена с префиксом браузера:

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

Это начинает становиться довольно сумасшедшим, хотя; Я бы избежал этого, если это возможно.

Answer 2

Используйте cssHooks.

Это поможет вам:

http://www.webmuse.co.uk/articles/border_radius_clohosu_ex/exort_ex >

Ссылки на cssHooks:

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

Удачи!

Answer 3

Просто дайте совет, мы можем использовать функцию для определения префикса CSS браузера Вот пример кода. http://jsfiddle.net/molokoloco/f6Z3D/