jQuery：跟随光标延迟

Question

我希望div这样短暂地跟随光标移动：http://vanderlanth.io/

如您所见，“跟随者”在动画中的延迟很短。

我已经重建了一些运行不正常的功能：

$(document).ready(function () {

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

    function handleMouseMove(event) {

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

        $(".cursor-follower").animate({
            left: (x - 16),
            top: (y - 16)
        }, 16);

        $(".cursor").css({
            left: (x - 4),
            top: (y - 4)
        });
    }
});

这是相当滞后的，动画不是很流畅和轻松。您还有其他解决方案吗？

Answer 1

您可以通过CSS过渡实现此效果。在JavaScript中，您只需要更新div的位置即可。

$(document).on('mousemove', (event) => {
  $('.follower').css({
    left: event.clientX,
    top: event.clientY,
  });
});

.follower {
  width: 20px;
  height: 20px;
  background-color: grey;
  border-radius: 10px;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  position: fixed;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="follower"></div>