JQuery在Y轴上制作背景动画 [英] JQuery Animate Background Image on Y-axis

问题描述

我似乎遇到了JQuery动画问题.我可以使背景图像朝正方向移动，但不能朝负方向移动.关于如何解决这个问题有什么建议吗?

I seem to experiencing a problem with the JQuery animation. I can animate the background image in the positive direction, but not in the negative direction. Any suggestions as to how to remedy this?

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

推荐答案

通过单独的background-position-x/y定位背景是Internet Explorer引入的一项功能，但从未将其纳入W3C规范.此后，拒绝将其添加到规范中的任何建议.

Positioning the background via separate background-position-x/y is a feature that Internet Explorer introduced but never made it into a W3C specification. Any recommendations to add it to the spec have since been denied.

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

您始终可以创建自己的小插件，并不难.

You can always create your own little plugin, it's not that hard.

使用jQuery 1.8，我们现在可以访问$ .Animation方法，该方法无需进行大量工作即可直接为我们提供动画值，因此我们可以执行以下操作:

Using jQuery 1.8 we now have access to the $.Animation method that gives us the animated values directly without to much work, so we can do something like :

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

然后使用它，我们可以做:

And then to use it we can do:

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

> FIDDLE

这是我为另一个答案

This is something I whipped up for another answer some days ago, and only works with pixels and does have some limitations, but it's simple and should work for most cases.

我想这样的事情会做你想要的:

I guess something like this would do what you want:

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

这篇关于JQuery在Y轴上制作背景动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！