jQuery animate di valore personalizzato (non una proprietà CSS)

Question

Mi piacerebbe fare la cosa più strana: apportare un cambiamento di valore con animate che non è una proprietà css ma solo una variabile.

Ho bisogno di questo perché voglio ruotare un elemento quando un utente fa clic sul suo bordo. Quindi ho bisogno di animare il valore dell'angolo e quindi usarlo in un algoritmo di disegno personalizzato.

Ho provato a utilizzare la proprietà css di un DIV nascosto solo per memorizzare il suo valore di angolo e animarlo, ma non funziona correttamente.

Qualcuno mi può aiutare con esso per favore?

Answer 1

Proprio imbattuto in questo mentre la ricerca della stessa cosa e la risposta corretta sembra essere

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

Trovato su http://james.padolsey.com/javascript/fun-with-jquerys-animate/

Answer 2

jQuery ha qualcosa chiamato step function che gli incendi dopo cambiare mai nell'animazione,

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

Answer 3

Se stai cercando di "spin" qualcosa, si può do that with css e, pertanto, è possibile utilizzare il jQuery animate function.

Answer 4

Annoyingly non è possibile eseguire la funzione animate senza effettivamente fornire alcune proprietà CSS su cui lavorare su (non fornisce i valori in mezzo).

Non c'è bisogno di avere anche l'animazione a lavorare su l'elemento effettivo (o variabile) che si desidera modificare in modo che sia possibile incidere a lavorare utilizzando l'argomento step come descritto da @Andrew in questo modo:

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

Tuttavia, questo è piuttosto inefficiente in quanto modifica la proprietà CSS (anche se non collegata) dell'elemento CSS in modo inutile. È meglio usare semplicemente una libreria "tweening" come Tween JS per fare questo genere di cose.