javascript - 相对于 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