last day (15 days later) » 

6:20 PM
-1
Q: Using CSS transitions with a constantly changing value

joshkrzI would like to know if it is possible to use CSS transitions when updating a style attribute with Jquery. My code updates the margin-left attribute of a DIV depending on where the mouse is positioned but if I use transitons the animation behaves erratically and it isn't smooth at all. CSS tran...

 
Your code doesn't work at all in Firefox - it should be e.pageX not event.pageX
 
@Pointy Thanks, I am in the early dev stages trying things out and experimenting. Cheers for the tip.
 
No matter how you do the animation, it might be good to introduce some delay because browsers will fire "mousemove" events very rapidly. Doing DOM inspection and update in a "mousemove" handler is a lot of work.
 
@Pointy Yes I have been looking this up to increase performance but wouldn't this make the system less smooth?
 
Well with no transition animation at all it responds pretty quickly, as far as I can tell. Exactly what sort of animation were you trying with CSS (or .animate() which, you're correct, is slow)?
 
6:20 PM
Well at the moment it moves too sharply. I am using jsbin.com/uninug/3/edit as a reference which was an answer to another stackoverflow question. However this code didn't work for me so I am writing my own based on the formulas used. In that example the animation isn't as smooth as CSS transitions would be. Primarily I am here to see if a smooth CSS transition can be achieved with rapidly updating values.
 
Thats exellent thank you. However could I just ask, why are there two "intervals"
 
Well, it sets a timout in the future so that once the mouse has stopped moving it can "catch up" to wherever the mouse ends up.
Note that it always saves the mouse position in "mouseX".
If it notices that it's been more than 100ms since the last time it moved, it updates.
You'd want to play around with the times as well as the time setting on the CSS transition to get it the way you want.
 
Yes I have been playing with that code to see how it works
 
Also, if you end up not liking CSS, investigate the Velocity.js library - it's a performance-oriented replacement for .animate()
 
6:23 PM
why would I need to save the mouse position into a variable if i am not using the position more than once
 
Because of the time delay - when it updates the position, you want it to update with the most up-to-date position, not the position 100 milliseconds in the past.
 
Ohhh I see!
Well thank you for your time, you have taught me quite a bit in this short time
 
Getting animations to look just right is really tricky. Good luck!!
 
Thanks :)
 

last day (15 days later) »