Jquery动画功能不移动图像答案

【问题标题】：Jquery animate function not moving imageJquery动画功能不移动图像
【发布时间】：2016-06-06 09:07:35
【问题描述】：

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

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;
}

【问题讨论】：

while 循环的目的是什么？
我最终会让图像变成正方形，我希望重复这样做。
while 可能会阻止 UI 访问 .animate() 函数。您也可以递归调用.animate()。
哦！那讲得通。是的，以前很冷，我很困惑。这一定是原因。

标签： javascript jquery html css jquery-animate

【解决方案1】：

.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>

【讨论】：

【解决方案2】：

你在使用 Jquery 吗？

试试这个 Jquery...它将把它移出屏幕

$(document).ready(function() {
  $('#img_num').animate({
    "left": $(window).width()
  },1000);

})

【讨论】：