Y 轴上的 JQuery 动画背景图像

Posted 2023-05-08

【中文标题】Y 轴上的 JQuery 动画背景图像

【英文标题】：JQuery Animate Background Image on Y-axis

【发布时间】：2012-09-02 15:17:51

【问题描述】：

我似乎遇到了 JQuery 动画的问题。我可以在正方向上为背景图像设置动画，但在负方向上不行。有关如何解决此问题的任何建议？

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

【参考方案1】：

通过单独的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 准备的东西，它只适用于像素并且确实有一些限制，但它很简单，应该适用于大多数情况。

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

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

【讨论】：

虽然您的解决方案为我提供了解决方案的途径，但我仍然没有完全理解它。您能否解释一下您对 $.Animation 和 e.tweens 变量的使用。

$.Animation 是 jQuery 1.8+ 中的一种新方法，用于为内容设置动画，就像常规的 animate() 函数一样。 $.Animate 支持补间和其他一些东西的区别，上面代码中使用的补间是动画时的值，所以它允许我们将该值分配给任何 CSS 语句，就像常规 animate( ) 函数在为高度或宽度等设置动画时会执行此操作，但常规的 animate() 当时只支持一个值，但使用 $.Animate 我们可以同时为两个背景值设置动画等等。

好吧，现在您处理的不是链接到元素的方法，而是接受元素作为参数的方法，因此您需要在动画对象上运行 stop() 而不是动画元素。这是FIDDLE ...

实际上没有我知道的直接方法来获取运行时间。常规的animate() 函数对此也没有太多选择，但至少在$.Animate 中你可以获得startTime，然后你所要做的就是从现在的时间中减去它，然后你'至少可以估计动画运行了多长时间，请参阅FIDDLE ..

对不起，出去了，没看到你的消息。在使用 stop() 的示例中，我返回了动画对象，因此变量包含返回的动画，这就是它起作用的原因。你总是可以直接将它分配给一个变量，就像这个FIDDLE...你这样做的方式，animateBG() 函数仍然返回this，它是动画元素而不是动画对象。请注意，如果您打算在 animateBG() 之后链接其他函数，例如 $(element).animateBG(100,100,100).hide()，则只有当它返回 this（元素）时才会起作用。

【参考方案2】：

@adeneo：此解决方案仅在您设置时才有效

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

否则起始位置将设置为零。

【讨论】：

谢谢@adeneo 和蒂姆。多亏了你们两个，我让它工作了——太棒了！ gist.github.com/1eccc45e93d9d2ae43c3ba0056c36d3e