javascript - jQuery 动画不适用于左属性

Question

我正在尝试使用 jQuery animate 将 Logo (<img> 元素)从屏幕外飞入位置。再一次，它不起作用。

这是我的 javascript(相关部分在 fly() 方法中。)

$(document).ready( function () {
  logoFlyer.init();
});

var logoFlyer = {
  numberOfLogos : 0,

  init: function () {
    logoFlyer.numberOfLogos = $('.logo').length;
    logoFlyer.fly(1);
  },

  fly: function (index) {
    logo = "#logo_" + index;

    $(logo).delay(300).animate({'left':'0px'}, 300, function () {
      if (index < logoFlyer.numberOfLogos) {
        logoFlyer.fly(index + 1);
      }
    });
  }
}

这是我的CSS

.logo {
  height: 100px;
  display:inline-block;
  margin-right: 30px;
  overflow:visible;
  border: 1px solid white;
}

.logo img {
  height: 80px;
  left: 1500px;
  position:relative;
}

当我设置 Logo 时' left到 0，他们确实是我想让他们去的地方。所以问题出在jQuery animate

如果有人能帮我解决这个问题，你可能会让我免于完全放弃 jQuery 并转向 angular.js。

Answer 1

所以这段代码:

$(logo).delay(300).animate({'left':'0px'}, 300, function () {
  if (index < logoFlyer.numberOfLogos) {
    logoFlyer.fly(index + 1);
  }
});

这里有趣的部分是 $(logo)，我假设它被处理为 $('#logo_1') 或 $('#logo_2') 等。所以现在重点是只有 position relative/absolute 元素可以被动画化。

因此您可以检查此元素是否具有相对/绝对位置。