Question

我有一排用animate（）向左或向右移动的图像。我试图使这些图像无限循环，所以当你点击下一个图像移动到第一个位置时。为什么$(this).css("left", "-320px");不适用于下面的if语句。

$("#right").click(function(){
  $("#sliderWindow").find("img").each(function(i) {
    var left = $(this).css("left");

    $("#imageContainer" + i).animate({"left": "+=220px"}, "slow");

    left = parseInt(left);
    left += 220;
    left = left + "px";

    if(left === "1220px") {
      //Why doesn't this work?
      $(this).css("left", "-320px");
    }
  });
});

Answer 1

这段代码非常混乱。：P但我认为你的声明正在工作，如果只是暂时的。

我将假设<img>返回的find("img")与ID为“imageContainerN”的元素相同。在这种情况下，问题可能是您在动画中间设置其位置。它可能最终在-320px处结束并保持在那里，直到下一个动画补间可能在几毫秒之后发生。

你可以尝试更像这样的东西（重要的部分是交换动画和测试的顺序）......

$("#right").click(function() {
    $("#sliderWindow").find("img").each(function() {
        if (this.offsetLeft >= 1220) {
            $(this).css("left", "-320px");
        }
        $(this).animate({left: "+=220px"}, "slow");
    });
});

原因

考虑在jQuery中设置动画时会发生什么。
1）jQuery看到你想要从当前位置+ 220px
2）假设图像当前是100px ...然后jQuery说，“好的，我会带你从100px到320px的过程中，比方说1秒
3）jQuery现在忘记图像的当前位置，只计算应该的位置满足每个补间

上的原始动画参数

动画开始后，然后执行if语句重新定位元素，以便随后发生以下情况......
1）基于参数计算的动画（当前位置100px，期望位置320px）
2）10毫秒后，图像移动到102.2
3）你的代码执行（假装它在当前的102.2位置返回true）
4）您的代码将图像重新定位到-320px
5）动画在10ms后再次补间并将图像移动到104.4px（现在看来您的图像从未移动到-320px）
6）动画再次补间并将图像移动到106.6px
7）动画再次补间并将图像移动到108.8px
8）依此类推，直到图像以320px

结束

我希望这是有道理的。我实际上没有看过jQuery动画代码，但这很可能发生了什么。

JQuery无限图像旋转

1 个答案:

原因