jQuery实现带延迟的鼠标跟随效果：寻求流畅解决方案

Hey Jonas, I’ve tackled this exact effect before—let’s get that follower feeling as natural as the example you mentioned! The main issue with jittery implementations usually boils down to not syncing with the browser’s repaint cycle or skipping the easing math that makes the delay feel intentional instead of choppy.

Here’s a polished, smooth implementation: #

First, the basic HTML structure:

<div class="mouse-follower"></div>

Then CSS (we’ll use GPU-accelerated properties to avoid layout thrashing):

.mouse-follower {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none; /* So it doesn't block clicks on underlying elements */
  will-change: transform; /* Tells browser to optimize this element for animation */
  z-index: 9999;
}

Now the JavaScript—this is where the magic happens, using requestAnimationFrame and easing:

// Track current mouse position
let mouseX = 0;
let mouseY = 0;

// Track follower element's current position
let followerX = 0;
let followerY = 0;

// Easing factor: lower = slower, more delayed follow (0.1-0.3 works best)
const easeFactor = 0.15;

const follower = document.querySelector('.mouse-follower');

// Update mouse coordinates on movement
window.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// Animation loop synced with browser repaint cycle
function animateFollower() {
  // Calculate incremental movement using easing: move a percentage of the remaining distance
  followerX += (mouseX - followerX - follower.offsetWidth / 2) * easeFactor;
  followerY += (mouseY - followerY - follower.offsetHeight / 2) * easeFactor;

  // Apply position with transform (GPU-accelerated, no layout recalculations)
  follower.style.transform = `translate(${followerX}px, ${followerY}px)`;

  // Repeat the loop for the next frame
  requestAnimationFrame(animateFollower);
}

// Start the animation
animateFollower();

Why this works better than your current code: #

• requestAnimationFrame: Unlike setInterval or setTimeout, this syncs the animation with the browser’s native repaint cycle (usually 60fps), eliminating jitter from misaligned timing.
• Easing Math: The easeFactor creates that natural lag by moving the follower a percentage of the remaining distance to the mouse each frame, instead of jumping directly to the position.
• GPU Acceleration: Using transform instead of top/left lets the GPU handle the movement, avoiding expensive layout recalculations that cause stuttering.

Quick tweaks to customize the effect: #

• Adjust easeFactor: A value of 0.1 will make the follower slower/more delayed; 0.3 makes it snappier.
• Change the follower’s style: Modify width/height, border-radius, or background in CSS to match your design.
• Add idle fade: Throw in a transition: opacity 0.2s in CSS and add a timeout to detect idle mouse, then toggle opacity for extra polish.

If your previous code was using setInterval or direct top/left updates, switching to this approach should fix the stuttering immediately. Give it a try!

内容的提问来源于stack exchange，提问作者Jonas