Question

基本上这用于创建水平视差效果。我使用锚链接在页面之间来回移动页面，这一切都很好。

现在我想要包含视差背景，这也适用于第一次尝试。下面是我的javascript：

<script>
$(document).ready(function () {
  $("#nav a").bind("click", function (event) {
    $("section").removeClass('current');
    $("#nav a").removeClass('current');
      event.preventDefault();
      var target = $(this).attr("href");
      $("#wrapper").stop().animate({
          scrollLeft: $(target).position().left - $("#container").position().left,
      scrollTop: $(target).position().top - $("#container").position().top,
  }, 
  1000);
    var x = $("#wrapper").scrollLeft();
    $("#parallax").animate({
              'background-position-x': '+20%',
              'background-position-y': '0%'
            }, 1200);

        $(target).addClass('current');
        $(this).addClass('current');

  });
});
</script>

这个colde做的是在我的导航链接和屏幕上的部分添加一个类，然后动画到屏幕上的那个部分，之后视差div也应该移动。这适用于第一次点击新部分，但之后它就会停留。

我认为错误在于

-position-x': '+20%',

代码行，但我不知道为什么这不起作用。有没有人有任何想法？

Answer 1

我不确定您是否可以按照自己的方式使用+=。

如果我理解你要做什么，我认为你的逻辑有些错误。当您单击时，您希望按20%向右移动背景？为了做到这一点，移动背景是一个功能，当你想要移动20px时，你可以调用它。类似的东西：

var moveBackground = function(){

    // First get the current background position - assuming its 0 on first time around
    var currentX = parseInt($("#parallax).css('background-position-x'));

    var newX = currentX + 20;

    $("#parallax").animate({
           'background-position': newX + '%' + ' 0%'
       }, 1200);

        $(target).addClass('current');
        $(this).addClass('current');

    });
}

这是完全未经测试的代码，我在工作时写的，所以如果不起作用，请不要讨厌我。

jquery animate backgroundposition只能工作一次

1 个答案: