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, чтобы делать такие вещи.

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