CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
Andrew Ricci
Andrew Ricci

Reputation: 477

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

Upvotes: 0

Views: 132

Answers (2)

guest271314
guest271314

Reputation: 1

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

Upvotes: 1

Pato Salazar
Pato Salazar

Reputation: 1477

Are you using Jquery?

Try this Jquery... it will move it out of the screen

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

})

Upvotes: 0

Related Questions