2

我需要使用 jQuery 为元素的背景位置属性设置动画。通过遵循使用默认 jQuery 动画功能的本教程，我没有运气。

http://snook.ca/archives/javascript/jquery-bg-image-animations

我的功能是：

$('#content').css( {backgroundPosition: "0 0"} )
             .animate(
                 {backgroundPosition:"(0 -900px)"}, 
                 {duration:500}
             );

我没有运气，所以我尝试编写自己的函数，改变元素的垂直背景位置。看起来像：

$.fn.moveBackgroundY = function( pixels, duration, easing ) {

    return this.animate(
                { pixels: pixels },
                {
                    step: function(now,fx) {

                        console.log("Background Y position - " + now);

                        $(this).css({
                            backgroundPosition: '0px ' + now + 'px',
                        });
                    },
                    duration: duration,
                    complete: function() {
                        $(this).css({
                            backgroundPosition: '0px 0px',
                        });
                    }
                }, easing);
};

要将元素的 Y 背景位置设置为 -900，我这样调用函数：

$('#content').moveBackgroundY(-900, 2100, 'easeInOutCubic');

请注意，这里的变量now（背景位置 Y）在step:中将从 0 减小到 -900。

这很好用，但我的问题来了。在此之后，我需要直接使用 jQuery .css() 函数将此背景位置重置为“0px 0px”，然后再次对其进行动画处理，如下所示：

$('#content').moveBackgroundY(300, 2100, 'easeInOutCubic');

在这种情况下，当我将背景位置重置为“0px 0px”时，参数现在应该从 0 变为 300，但它从 -900 变为 300，其中 -900 是我在调用函数时设置的值。

任何人都知道出了什么问题，或者我如何重置此参数以便每次都采用正确的值？

我有另一个类似的函数，它可以旋转改变 CSS3 属性变换的元素 - 旋转，我也有同样的问题。

谢谢你的帮助！

4

1 回答 1

3

这对我有用： 

return this.animate(
            { pixels: pixels },
            {
                step: function(now,fx) {
                    var calculatedPixels = this.pixels;
                    console.log("Background Y position - " + now);


                    $(this).css({
                        backgroundPosition: '0px ' + calculatedPixels + 'px',
                    });
                },
                duration: duration,
                complete: function() {
                    $(this).css({
                        backgroundPosition: '0px 0px',
                    });
                    //not so sure about this but you have to do this somehow
                    this.pixels = 0;
                }
            }, easing);

位置重置问题来自您正在动画“像素”值而不是 backgroundPosition 的事实。然后将“像素”值应用于背景位置。然后重置背景位置，但不重置“像素”值。下一个动画将以最新的像素值作为起始值。您必须找到一种方法以某种方式将“像素”值重置为 backgroundPosition 值，以使它们保持同步。

于 2012-02-03T14:40:16.923 回答