[jQuery] Mouse-responsive scrolling content within a container, with mouse position and easing
Hi!
I'm trying to emulate a Flash behavior I see quite often, like so:
http://mgb-architecture.ca/
I've implemented a one-to-one scrolling version here, but I would like
it to be smoother, easing in to its final position based on the mouse
position: http://www.jillanholt.ca/projects
The current jquery code is like so:
$('#projects-container').mousemove(function(e) {
newX = ($('#projects-container').width() - $('ul.projects-
list').width()) * e.pageX/$('#projects-container').width();
$('ul.projects-list').css({left: newX});
});
So, that works great, but when I tried doing it with .animate() and
easing, it becomes very jumpy (i.e. unusable) in Internet Explorer. It
seemed like it was lining up animations as the mouse moved and just
became paralyzed. Is this something where the event needs to interrupt
any current animations each time it's triggered?
Thanks in advance for any help you can offer!
David