jquery - jQuery动画不工作

Question

我正在使用 jQuery 在屏幕上移动一些元素，但是动画功能不起作用（或者我的 CSS 定义阻碍了它，更像是..）。例如，我相信这个动画元素 id foobar 到给定位置..

$('#foobar').animate({ top: '0px', left: '200px' });

我在这里有一个 jsfiddle 示例：玩一下

据我所知，我应该能够放置绝对定位的元素（示例中的 menuButton 类），只要它们位于相对定位的 div 中（示例中的 ScreenDesign）。但是我不能让它工作。

谢谢 ：）

Answer 1

你只是忘了引用 jQuery。

http://jsfiddle.net/upNSd/2/

要调试类似问题，您应该检查 javascript 控制台（Chrome 和 FireBug 中的 F12）。对于你的小提琴它说：

未捕获的类型错误：无法调用 null 的方法“动画”

Answer 2

您的 jsFiddle 不起作用，因为不包含jQuery （默认情况下仅包含不同的库MooTools）。

要包含 jQuery，请从“框架”选项卡中选择它：

这是一个固定版本：little link。

Answer 3

将动画包装在 jQuery 就绪函数中，确保 DOM 完全加载。

 jQuery(document).ready(onready);

  function onready
  {
    jQuery('#foobar').animate({ top: '0px', left: '200px' });

  }

此外，使用 'jQuery' 而不是 doller 符号将确保不会与任何 over js 库发生冲突 :-)