Question

我有以下

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

我希望在鼠标悬停在箭头上方时将.chart平滑移动到左侧，右箭头将其移动到右侧。我这样做是通过应用- left (-7500px is the max)将其向左移动而0是最右边的。{/ p>

以上将其移动超过10，但它不会继续移动它。我怎样才能得到它以便继续移动它。我正在使用像

这样的东西

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

但问题是如果我说-6500px超过1000秒的剩余时间需要20秒，而完全距离需要20秒。所以速度是偏斜的，我想要一个标准的增量。

Answer 1

不完全理解这个问题，但你可以像这样增加/减少动画：

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

请注意+=运算符。

编辑：这个答案只是部分正确。悬停时的动画行为不是所希望的。试图解决。

Answer 2

基本上你需要的是一个速率函数。我在创建旋转木马时遇到了同样的问题。

rate = distance/time

因此，您的费率为0.375

现在，你需要做的就是找到距离，你可以相应地调整你的时间。

time = distance/0.375

所以看起来应该是这样的：

    $('.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();
    });

显然，需要进行一些调整才能做到正确。但这个概念就在那里。

对于我的情况，因为我使用的是<ul>，因为它是旋转木马，这就是我的距离：

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

如何动画滑动保持平滑？

2 个答案: