title: moving image left to right javascript
body: <p>So I need help, I need to create a javascript file (with matching HTML), that allows an image to move from left to right continuously. And then when the user clicks the mouse button, the image must then move up and down continuously. </p>
  
  <p>I so far I have tried to do the first part, however using a code I have found that it does not work for me and I'm not too sure why.  I feel like I'm missing something so obvious but I can't figure it out.  </p>
  
  <p>Thanks in advance.</p>
  
  <p>This is my code</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Task 2&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="task2.css"&gt;
  &lt;script src="task2.js"&gt;&lt;/script&gt;
  
  &lt;div id="animate"&gt;Sample&lt;/div&gt;
  &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>#animate {
      position: relative;
      border: 1px solid green;
      background: yellow;
      width: 100px;
      height: 100px;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong>:</p>
  
  <pre><code>(document).ready(function() {
      var width = (document).width();
  
      function goRight() {
          ("#animate").animate({
          left: width
        }, 5000, function() {
           setTimeout(goLeft, 50);
        });
      }
      function goLeft() {
          ("#animate").animate({
          left: 0
        }, 5000, function() {
           setTimeout(goRight, 50);
        });
      }
  
      setTimeout(goRight, 50);
  });
  </code></pre>