Andrew Ricci Andrew Ricci - 5 months ago 11
Javascript Question

Jquery animate function not moving image

I'm trying to move an image and that's about it. I cant seem to figure out why its giving my problems. The idea is to have the image go in a square pattern all while rotating a set of images. Ill figure out that part but right now I cant get the image to animate at all.

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

Answer

.onload is not a jQuery method, use .load(); also, while loop does not appear to be necessary

$(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>

Comments