動畫背景圖像相對於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

在除了建議使用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); 
} 
...