Может ли метод jQuery .animate () воздействовать на переменные, а не на свойства CSS?

Question

Я начал писать некоторый код JS, чтобы заставить значение переменной со временем увеличиваться, вплоть до целевого значения, с некоторой формой «облегчения».

Я понял, что jquery уже делает это в.animate () метод.Конечно, метод предназначен для манипулирования свойствами CSS, а не общими переменными.

Мой вопрос: можно ли что-нибудь сделать, чтобы взломать его, чтобы метод воздействовал на переменную, а не на свойство CSS?

Answer 1

Да, вы можете анимировать переменные. Демонстрация здесь

$({ n: 0 }).animate({ n: 10}, {
    duration: 1000,
    step: function(now, fx) {
        $("div").append(now + "<br />");
    }
});

В этом примере я анимирую n от 0 до 10 в 1 секунду.Функция step вызывается во время анимации, и оттуда вы можете получить текущее значение в now.

Лично я использовал эту технику, чтобы анимировать одновременно несколько свойств CSS нелинейным способом.

Animate запускается путем изменения значения свойств, объявленных в объектах JS.Хотя animate предназначен для изменения скалярных значений CSS, его также можно безопасно использовать для любого универсального свойства, так как long value является скалярным.
Фактически, вы можете думать о CSS как о наборе объектов JSгде свойства, например, top, margin и т. д.

Обратите внимание, что следующие сценарии делают то же самое.Они изменяют CSS left с 0 на 10

$("#test").css('left', 0).animate({ left: 10 }, 1000);

- это то же самое, что

$({ left: 0 }).animate({ left: 10 }, {duration: 1000, step: function(now, fx) {
  $("#test").css('left', now);
}});

или без использования параметра now

var obj = { left: 0 };
$(obj).animate({ left: 10 }, {duration: 1000, step: function() {
      $("#test").css('left', obj.left);
}});

Чтобы увидеть их в действии нажмите здесь