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

Question

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

Вы можете использовать таймаут, чтобы сделать это

var progressTimer;
$(document).ajaxStart(function () {
    $('#container').append("<div class='progress'></div>");
    //if a new ajax request is started then don't remove the progress icon
    clearTimeout(progressTimer);
}).ajaxStop(function () {
    progressTimer = setTimeout(function () {
        $('.progress').remove();
    }, 1000)
});

30

jquery jquery-animate border css3

задан Dan Neely 15 July 2014 в 16:14

1 ответ

Другие вопросы по тегам:

jquery jquery-animate border css3

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

score 52 · Accepted Answer

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

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

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