Question

所以我在一个带有背景图像的页面上有一个对象，并且在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'
        });
    });

http://jsfiddle.net/TWHh2/

Answer 1

添加此CSS

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

updated fiddle

Answer 2

除了使用CSS过渡作为建议的val之外，您还可以使用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'
        });
    }
});

<强> jsFiddle

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

这样做的缺点是，当鼠标快速移动时，它会变得反应迟钝，类似于仅限CSS的解决方案。

<强>替代

结合JS和CSS过渡解决方案：

CSS

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

JS

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

动画相对于mousemove的背景图像

2 个答案: