Question

我有一个鼠标悬停功能，基本上会导致div上下移动。这使用间隔计时器并进行动画处理以使其更平滑。

如何让动画加速每个间隔以匹配最终的缓出速度？基本上，当你鼠标悬停时，它应该越来越快，但保持平滑的动画。

function StartAnimation() {
        var oldMarginTop = $('#MyDiv').outerHeight(true) - $('#MyDiv').innerHeight();
        var newMarginTop = oldMarginTop + 100;
        $('#MyDiv').animate({ marginTop: newMarginTop }, 500, 'linear');
    }
}

$('#SomeObject').bind('mouseenter', function () {
    this.iid = setInterval(function () {
        StartAnimation();
    }, 500);
}).bind('mouseleave', function () {
    this.iid && clearInterval(this.iid);
    //FinishAnimation();
});

Answer 1

我认为你不需要间隔。

我认为你所描述的是easeIn jQuery.animate，你可以使用this jQuery plug-in（以及各种替代的缓和函数）。该页面还包含一个演示，允许您测试每个缓动函数，以找到最适合您要求的函数。

然后，您应该可以在调用{{1}}时直接使用您选择的功能作为参数。

如何制作一个加速的自定义EaseOut功能？

1 个答案: