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

Question

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

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

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

Может кто-нибудь помочь мне с этим, пожалуйста?

Answer 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/

Answer 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-свойство height элемента (хотя и не привязано). Лучше всего использовать библиотеку «анимации», такую ​​как Tween JS , чтобы делать подобные вещи.

Answer 3

Если вы хотите что-то «раскрутить», вы можете сделать это с помощью css и, следовательно, вы можете использовать jQuery animate function .