相对于 mousemove 动画背景图像

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

除了按照 vals 的建议使用 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'
        });
    }
});

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);
}
...