使用jquery在屏幕上滑动div

Question

我正在开发一个项目，我有一个div，显示从AJAX调用返回到PHP的数据。

当用户点击某些内容时，我希望容器div向左滑动，但由于某种原因，动画无效。

以下是我的jquery片段，它不起作用：

$( "#downloadsContainer" ).animate({
                    position: "absolute",
                    left: "-200px",
                  }, 5000, function() {
                    // Animation complete.
                  });

当我运行上面的代码时，没有任何反应，我在chrome控制台中看不到任何错误。

但是，如果我运行以下代码，它显然没有动画：

$("#downloadsContainer").css({ "position": "absolute", "left": "-200px" });

我不明白动画的错误以及为什么没有发生任何事情。

Answer 1

jQuery的动画需要一个起点，在某处动画，所以左边的值必须在动画之前设置，甚至为零，只要它不是auto，默认值。

jQuery css()没有这个问题，它不需要一个起点，它只是设置值。

此外，要定位元素并使元素实际移动，元素必须在动画制作之前设置的位置不是默认static。