JQuery在Y軸上動畫背景圖像

我似乎遇到了JQuery動畫的問題。我可以在正方向上對背景圖像進行動畫處理，但不能在負方向上進行動畫處理。有關如何補救這個問題的任何建議？JQuery在Y軸上動畫背景圖像

$(this).parent().css('background-position-y', '19px'); 
$(this).parent().animate({ 'background-position-y': '-=19px' }, 1000, 'linear');

來源

2012-09-09 user1434739

定位通過單獨background-position-x/y背景是Internet Explorer推出，但從來沒有把它做成了W3C規範的特點。任何將其添加到規範的建議都被拒絕。

請參見： http://snook.ca/archives/html_and_css/background-position-x-y

你總是可以創建自己的小插件，它並不難。

使用jQuery 1.8，我們現在有機會獲得$ .Animation方法，讓我們的動畫值的情況下直接到很多工作，所以我們可以這樣做：

$.fn.animateBG = function(x, y, speed) { 
    var pos = this.css('background-position').split(' '); 
    this.x = pos[0] || 0, 
    this.y = pos[1] || 0; 
    $.Animation(this, { 
     x: x, 
     y: y 
     }, { 
     duration: speed 
     }).progress(function(e) { 
      this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px'); 
    }); 
    return this; 
}

然後使用它我們可以這樣做：

$("#background").animateBG(x-value, y-value, speed);

FIDDLE

這是我前幾天颳起了爲another answer，只有用PIX工作els，確實有一些限制，但它很簡單，應該適用於大多數情況。

我想這樣的事情會做你想要什麼：

$(this).parent() 
     .css('background-position', '0 19px'); 
     .animateBG(0, 0, 1000);

來源

2012-09-09 15:04:08 adeneo

太棒了，謝謝你的好評！ – user1434739

雖然您的解決方案爲我提供瞭解決方案的途徑，但我仍然不完全明白。您能否介紹一下您使用$ .Animation和e.tweens變量。 – user1434739

$。動畫是jQuery 1.8+中的一種新方法，用於對東西進行動畫製作，就像普通的animate（）函數一樣。它不同於$ .Animate支持補間和其他一些東西，以及上面代碼中使用的補間是它的動畫值，所以它可以讓我們將該值賦給任何CSS語句，就像普通動畫一樣（）函數可以在對動畫效果（如高度或寬度）進行動畫時使用，但常規animate（）當時僅支持一個值，但使用$ .Animate可以同時對兩個背景值進行動畫製作等。 – adeneo

@adeneo：如果設置

this.x = pos[0].split('px')[0] || 0; 
this.y = pos[1].split('px')[0] || 0;

否則起始位置將被設置爲零這種解決方案僅適用。

來源

2014-02-08 08:03:37 Falk

JQuery在Y軸上動畫背景圖像

回答

相關問題