Javascript 当鼠标离开并进入窗口时，如何将层从一个位置平滑地移动到另一个位置？

我正在改进视差效果，尝试使用鼠标离开和进入窗口的位置在两个位置之间创建平滑过渡。如果您注意到JSFIDLE有一个“pop”，我想用转换来替换它。我该怎么做

$(document).ready(function() {
  $('#layer-one').mousemove(function(e) {
    parallax(e, this, 1);
    parallax(e, document.getElementById('layer-two'), 2);
    parallax(e, document.getElementById('layer-three'), 3);
  });
});

function parallax(e, target, layer) {
  var layer_coeff = 10 / layer;
  var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
  var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
  $(target).offset({
    top: y,
    left: x
  });
};

---

先谢谢你

也许，您可以使用GSAP库使偏移效果更平滑，这只是一个快速示例，请尝试一下：

var initPos=$（“#第一层”）.position（）；
$（文档）.ready（函数（）{
$（“#第一层”）.mousemove（函数（e）{
视差（e，this，1）；
视差（e，document.getElementById（'layer-two'），2）；
视差（e，document.getElementById（'layer-three'），3）；
});
});
功能视差（e、目标、层）{
可变层系数=10/层；
var x=（$（window.width（）-target.offsetWidth）/2-（e.pageX-（$（window.width（）/2））/layer\u系数；
变量y=（$（window.height（）-target.offsetHeight）/2-（e.pageY-（$（window.height（）/2））/layer\u系数；
/*$（目标）。偏移量({
上图：y，
左：x
});*/
到（$（目标），2，{x:x，y:y}）；
};
document.onmouseleave=函数（）{
$（“#第一层”）。设置动画({
不透明度：0.4，
左:10,，
}“快”）；
};
.layer{
填充：20px；
颜色：白色；
}
#基层{
溢出：隐藏；
}
#第一层{
背景：红色；
}
#第二层{
背景：绿色；
}
#第三层{
背景：蓝色；
}
.滑块{
左边距：自动；
右边距：自动；
溢出：隐藏；
填充顶部：200px；
}
.滑块img{
宽度：80%；
左：10%；
右：10%；
高度：自动；
左边距：自动；
右边距：自动；
}

内容
内容
内容
谢谢您的示例。不幸的是，这并不是我想要实现的（我的缺点是我把错误的JSFiddle放在了那里，现在我改正了）。我正在尝试实现以下目标1）鼠标离开窗口-2）视差层根据最后一个鼠标位置固定-3）鼠标从其他位置进入窗口-4）视差层调整到新的鼠标位置。这是更清楚的解释吗？现在在我的例子中，如果我把鼠标从窗口拿出来并返回，视差层从一个位置跳到另一个位置。我想平稳过渡。