I am trying to implement my own scrolling in a ticker with Jquery because the normal scrolling doesn't work too well when it's countering animation. I am at the point where I actually need to scroll the ticker, based on mouse movement. Normally it scrolls along with:
#ticker {
white-space: nowrap;
-webkit-animation: move_eye 6s linear 0s infinite normal;
background-color: yellow;
}
and on hover I pause the scrolling with:
#controller:hover #ticker {
-webkit-animation-play-state: paused
}
#controller
is the tickers parent.
What I thought I could do to move the ticker is detect when the mouse is in the controller, and clicked. Then when the user drags the mouse I would animate the ticker moving with jquerys animation function. I have it like this
var current_x = 0;
function track_mouse_pos(event) {
var direction = "";
if(event.clientX < current_x){
direction = "left";
current_x = event.clientX;
$("#ticker").animate({left:'+=5px'});
}
else{
direction = "right";
current_x = event.clientX;
$("#ticker").animate({left:'-=5px'});
}
$('#start_mouse_tracker').html("( " + direction + ", " + current_x + " )");
$('#drag_tracker').html("( " + event.clientX + ", " + event.clientY + " )");
}
$("#controller").mousedown(function (event) {
var start_x = event.clientX;
var start_y = event.clientY;
$("#controller").on('mousemove', {start_x: start_x}, track_mouse_pos);
});
I can track the mouse, I can get its direction, but it won't move. Why is it not moving? How can I make it move?
JSFiddle