javascript - 尝试在 mousemove 上将 div 移至 "follow"光标，但有延迟

Question

我想创建类似于旧鼠标轨迹的效果，其中 div 被延迟但跟随光标。

通过使用设置间隔触发光标坐标的动画，我已经相当接近了。

$("body").mousemove(function (e) {
    if (enableHandler) {
        handleMouseMove(e);
        enableHandler = false;
    }
});

timer = window.setInterval(function(){
    enableHandler = true;
}, 250);

function handleMouseMove(e) {

  var x = e.pageX,
      y = e.pageY;

      $("#cube").animate({
        left: x,
        top: y
      }, 200);

}

JSFiddle

现在还有两个问题:

1. “追逐”div 非常跳跃(因为需要使用设置间隔)

2. 如果鼠标移动在动画被触发之前停止，div 将留在原地，远离光标。

Answer 1

我做的略有不同。我没有使用 setInterval(甚至 setTimeout)——我只是让动画需要 x 毫秒才能完成。动画越长，后面的 div 的响应就越慢。

我注意到的唯一问题是，如果鼠标移动很多，它会被备份。

$(document).ready(function () {

    $("body").mousemove(function (e) {
        handleMouseMove(e);
    });

    function handleMouseMove(event) {

        var x = event.pageX;
        var y = event.pageY;

        $("#cube").animate({
            left: x,
            top: y
        }, 1);
    }
});

https://jsfiddle.net/jvmravoz/1/