Javascript 设置背景图像相对于鼠标移动的动画

因此，我在页面上有一个对象，带有背景图像，在mousemove上，它相对于鼠标移动背景位置。但我唯一的问题是，当鼠标进入对象时，将背景图像设置为鼠标的当前位置

我能够将背景位置动画设置回其原始位置

这是我的jQuery

    //MOUSE MOVE, INVERT BACKGROUND POSITION
    jQuery('.homeSlider').mousemove(function(move){
        var moveMouse = (move.pageX * -1 / 15);
        jQuery('.homeSlider .slide').css({
            'background-position-x': moveMouse + 'px'
        });
    });
    //MOUSE LEAVE, ANIMATE BACKGROUND TO START POSITION
    jQuery('.homeSlider').mouseleave(function(){
        jQuery('.homeSlider .slide').animate({
            'background-position-x': '0'
        });
    });

添加此CSS

.slide {
    transition: background-position-x 0.5s;
}

---

除了按照VAL的建议使用CSS转换外，还可以使用JS根据需要移动的距离设置位置或设置动画。如果距离高于某个阈值，则可以设置该距离的动画（否则该运动会跳跃）。否则，将CSS设置为当前状态

类似的方法可能会奏效：

var animating = false;
jQuery('.homeSlider').mousemove(function(move){
    var $slider = jQuery('.homeSlider .slide');
    var moveMouse = (move.pageX * -1 / 3);
    var bgPos = $slider.css('background-position-x');

    if (!animating && Math.abs(moveMouse - parseInt(bgPos)) > 10) {
        animating = true;
        $slider.animate({
            'background-position-x': moveMouse + 'px'
        }, 400);
        setTimeout(function() {
            animating = false;
        }, 400);
    } else if (!animating) {
        $slider.css({
            'background-position-x': moveMouse + 'px'
        });
    }
});

我建议使用纯CSS解决方案，因为这将始终应用动画，其中包括小的背景位置更改。如果使用过渡检查小提琴，平滑背景效果将不再具有很强的响应性，并失去一些平滑度

---

这样做的缺点是，当鼠标快速移动时，它的响应性很差，类似于仅CSS的解决方案

备选方案

结合JS和CSS转换解决方案：

CSS

JS

---

这样做的缺点是，它还影响了

mousemove

功能，使背景图像移动不再平滑，响应性也不强。@abhitalks它只是将background-position-x属性“转换”为0.5秒。也就是说，对属性所做的更改将以转换的方式更新。@VAL:谢谢。我以前认为它只适用于css事件，如“：hover”等。再次感谢。@TheOne如果我不太快地移动鼠标，它对我来说效果很好。通过添加

mouseenter

事件处理程序，并让

mousemove

检查背景是否正在从

mouseenter

事件设置动画，也可以改进该示例。这样您就不需要为

mousemove

事件设置动画部分。

.slide.animate {
    transition: background-position-x 0.4s;
}

...
if (!$slider.hasClass('animate') && Math.abs(moveMouse - parseInt(bgPos)) > 10) {
    $slider.addClass('animate');
    setTimeout(function() {
        $slider.removeClass('animate');
    }, 400);
}
...