为什么我不能用jquery移动我的股票

Question

我试图用Jquery在自己的代码中实现自己的滚动，因为正常的滚动在抵抗动画时效果不太好。 我现在实际上是根据鼠标移动滚动代码的地方。 通常，它会随着以下内容滚动：

#ticker {
    white-space: nowrap;
    -webkit-animation: move_eye 6s linear 0s infinite normal;
    background-color: yellow;
}

在悬停时，我使用以下命令暂停滚动：

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

#controller是股票行情的父级。

我以为我可以移动股票行情的方法是检测鼠标何时在控制器中并单击。 然后，当用户拖动鼠标时，我将使用jquerys动画功能来对移动的股票行进行动画处理。 我有这样的

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);
}); 

我可以跟踪鼠标，可以得到它的方向，但是它不会移动。 为什么不动呢？ 我该如何移动？

的jsfiddle

Answer 1

动画需要位置相关

尝试

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

如果元素的位置样式属性为静态（默认情况下为静态），则方向属性（顶部，右侧，底部，左侧）对元素没有明显的影响。 通过http://api.jquery.com/animate/