3

JQuery アニメーションで問題が発生しているようです。背景画像を正の方向にアニメーション化できますが、負の方向にはアニメーション化できません。これを改善する方法について何か提案はありますか?

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

2 に答える 2

14

別の方法で背景を配置するbackground-position-x/yことは、Internet Explorer が導入した機能ですが、W3C 仕様にはなりませんでした。それを仕様に追加するという推奨事項は、その後拒否されました。

参照: http://snook.ca/archives/html_and_css/background-position-xy

いつでも独自の小さなプラグインを作成できます。それほど難しいことではありません。

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);​

フィドル

これは、数日前に別の回答を作成したもので、ピクセルでのみ機能し、いくつかの制限がありますが、シンプルでほとんどの場合に機能するはずです.

私はこのような何かがあなたが望むことをすると思います:

$(this).parent()
       .css('background-position', '0 19px');
       .animateBG(0, 0, 1000);​
于 2012-09-09T15:04:08.470 に答える