Why can't I move my ticker with jquery

Question

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

Answer 1

Animation needs position relative

try

#controller:hover #ticker {
    -webkit-animation-play-state: paused;
position:relative;
}

Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default. via http://api.jquery.com/animate/