Вопрос по css3, jquery – Свойство jQuery animate css border-radius (webkit, mozilla)

29

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

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

<code>-webkit-border-radius

-moz-border-radius
</code>

Ваш Ответ

3   ответа
50

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

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

Ну ... у 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); 

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

Error: User Rate Limit Exceeded user113716
Error: User Rate Limit Exceeded user113716
Error: User Rate Limit Exceeded user113716
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded user113716
2

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

3

Похожие вопросы