JQuery aimate css border-radius свойство (webkit, mozilla)

Ответ 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); 

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

Ответ 2

Использовать cssHooks.

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

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

Ссылки на cssHooks:

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

Удачи!

Ответ 3

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