How to animate slide left smoothly?

Question

I have the following

        $('.left_arrow').hover(function() {
            $('.chart').stop().animate({
                left: "+=10"
            });
        },
        function() {
            $('.chart').stop();
        });

And I want to have it when you mouse over the arrow it smoothly moves the .chart to the left, and the right arrow it moves it to the right. I am doing this by applying a - left (-7500px is the max) to move it to the left and a 0 is the farthest it can go right.

The above moves it over 10, but it doesn't keep on moving it. How can I get it so it keeps on moving it. I was using something like

        $('.left_arrow').hover(function() {
            $('.chart').stop().animate({
                left: "-7500px"
            }, 20000);
        },
        function() {
            $('.chart').stop();
        });

But the problem is if I am say -6500px over it takes 20 seconds to go the rest of the 1000, vs 20 seconds to go the full distance. So the speed is skewed, I want a standard increment.

Answer 1

Not fully understanding the question, but you can increment/decrement animations like so:

$('.chart').stop().animate({
    "left": "+=100px"
}, 250);

Note the += operator.

EDIT : This answer is only partially correct. Animation behavior on hover is not as desired. Trying to solve.

Answer 2

Basically what you need is a rate function. I had the same issue when I was creating my carousel.

rate = distance/time

So, your rate is 0.375

Now, all you will need to do is find the distance and you can adjust your timing accordingly.

time = distance/0.375

So it should look something like this:

    $('.left_arrow').hover(function() {
        var distance = /*Get Distance Remaining*/
        var sd = 7500;
        var time = 20000;
        var rate = sd/time;
        var time = distance/rate

        $('.chart').stop().animate({
            left: "-7500px"
        }, time);
    },
    function() {
        $('.chart').stop();
    });

Obviously it would need some tweaking to get just right. But the concept is there.

For my situation, because I was using a <ul> since it was a carousel this is the way I got distance:

distance = Math.abs($ul.position().left);