JQuery анимация пользовательского значения (а не свойство CSS)

Я хотел бы сделать самое странное: измените значение с помощью анимации, которая не является свойством css, а просто переменной.

Мне нужно это, потому что я хочу повернуть элемент, когда пользователь нажимает на его границу. Поэтому мне нужно оживить значение угла, а затем использовать его в пользовательском алгоритме рисования.

Я попытался использовать свойство css скрытого DIV, чтобы сохранить его значение угла и анимировать его, но оно не работает должным образом.

Кто-нибудь может мне помочь?

Ответ 1

Просто наткнулся на это, ища то же самое, и правильный ответ выглядит

$({foo:0}).animate({foo:100}, {
    step: function(val) {
        // val takes values from 0 to 100 here
    }
})

Найдено на http://james.padolsey.com/javascript/fun-with-jquerys-animate/

Ответ 2

Невозможно запустить функцию animate без фактического предоставления некоторых свойств CSS для ее работы (это не дает вам значений между ними).

Вам не нужно даже анимацию работать с фактическим элементом (или переменной), который вы хотите изменить, чтобы можно было взломать его для работы с помощью аргумента step, как описано в @Andrew, например:

$('<div/>').css({ height: _your_start_value }).animate({
    height: _your_end_value
}, { 
    step: function (currentValue) {
        //do what you need to with the current value..
    }
});

Тем не менее, это довольно неэффективно, так как оно неизбежно меняет свойство CSS (высота) без атрибута высоты элемента. Лучше просто использовать "tweening" библиотеку, такую как Tween JS, чтобы делать такие вещи.

Ответ 3

Если вы хотите что-то "закрутить", вы можете сделать это с помощью css и, следовательно, вы можете использовать функция анимации jQuery.

Ответ 4

jQuery имеет что-то, называемое функция шага, которая срабатывает после изменения анимации,

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});