Question

我最近第一次尝试使用Javascript动画，并且在我的一个项目中遇到了这个问题。下面的jquery水平滚动没有问题。但是，当我在尝试垂直滚动时添加第二个值时，没有任何事情发生，并且不会抛出任何错误。

    $( ".space_background" ).ready(function() {
  $( ".space_background" ).animate({
    backgroundPosition: "+=200px"
  }, 5000, function() {
  });
});

以下代码是我认为我必须添加以实现效果

$( ".space_background" ).ready(function() {
      $( ".space_background" ).animate({
        backgroundPosition: "+=200px 200px"
      }, 5000, function() {
      });
    });

我也尝试过backgroundPositionX和backgroundPositionY，两者都不起作用。

任何苛刻的帮助

Answer 1

使用jQuery在垂直方向移动背景

$( ".space_background" ).ready(function() {
  $( ".space_background" ).animate({
    backgroundPositionY: "+=200px"
  }, 5000, function() {
  });
});

上面的代码适用于少数浏览器，因为jQuery可以正确地为背景位置设置动画，因为需要它来设置两个值的动画。上面的代码适用于实现非标准background-position-x和-y的浏览器，如Internet Explorer。所以你需要使用任何插件，如下所示 -

/**
 * @author Alexander Farkas
 * v. 1.02
 */
(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
           if (fx.state === 0 && typeof fx.end == 'string') {
               var start = $.curCSS(fx.elem,'backgroundPosition');
               start = toArray(start);
               fx.start = [start[0],start[2]];
               var end = toArray(fx.end);
               fx.end = [end[0],end[2]];
               fx.unit = [end[1],end[3]];
        }
        var nowPosX = [];
        nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
        nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
        fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

       function toArray(strg){
           strg = strg.replace(/left|top/g,'0px');
           strg = strg.replace(/right|bottom/g,'100%');
           strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
           var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
           return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
       }
    }
});
})(jQuery);

或 http://snook.ca/technical/jquery-bg/jquery.bgpos.js

现在，您可以使用jQuery编写以下代码来动画背景位置

 $( ".space_background" ).animate({backgroundPosition:"(-150px 0)"});

更多参考： http://snook.ca/archives/javascript/jquery-bg-image-animations

JQuery backgroundposition似乎只在一个方向上工作

1 个答案: