javascript - Jquery动画功能不移动图像

标签 javascript jquery html css jquery-animate

我正在尝试移动图像,仅此而已。我似乎无法弄清楚为什么它会给我带来问题。这个想法是让图像在旋转一组图像的同时一直呈方形。我会弄清楚那部分,但现在我根本无法让图像制作动画。

HTML:

  <body>
    <h1>Assignment 1</h1>
    <hr>

    <img id="img_num" src="images/img_num1.png" alt="Image."/>

    <hr>
    <a href="index.html">PAGE 1 | </a>
    <a href="page2.html">PAGE 2</a>

    <footer>Name | Student #</footer>
  </body>

JS:

$(window).onload(function(event)
{   
    while(true)
    {   
         $('#img_num').animate(
          {"left": "+=50px"},
          "slow");
    }    
});

CSS:

#img_num {
    width: 250px;
    height: 250px;
    position: relative;
}

最佳答案

.onload 不是 jQuery 方法,请使用 .load();此外,while 循环似乎不是必需的

$(window).load(function(event) {
  //  while(true)
  //  {   
  $('#img_num').animate({
      "left": "+=50px"
    },
    "slow");
  //  }    
});
#img_num {
  width: 250px;
  height: 250px;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<body>
  <h1>Assignment 1</h1>
  <hr>

  <img id="img_num" src="http://placehold.it/300" alt="Image." />

  <hr>
  <a href="index.html">PAGE 1 | </a>
  <a href="page2.html">PAGE 2</a>

  <footer>Name | Student #</footer>
</body>

关于javascript - Jquery动画功能不移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37648234/

相关文章:

javascript - 如何在一行而不是两行上获取使用 Angular Directive(指令)的多个元素

javascript - IFrame 异步加载?如果不是为什么会出现这个错误?

html - 使用 Flexbox 以相同的高度均匀分布导航元素

javascript - 图片资源位置

javascript - 带有按类别标记/突出显示的关键字的文本段落

javascript - 使用 Google map API 自动完成地址

javascript - 在 Javascript 中提取大型多维数组的切片

javascript - 使用 jquery 我想根据坐标将图像放在另一个图像上

jQuery cookie 在 IE 中不起作用

html - CSS:仅显示列表中的最后 x 个元素