title: Jquery Animate Image right on click event then back to the left on second click event
body: <p>I am trying to animate an set of images to individually move 300px right on the first click and when clicked again move 300px left back to the starting position. </p>
  
  <p>What I have right now is not working. So it's either A) something wrong with my syntax or B) my images arent actually rendering at 5px.</p>
  
  <p>EDIT: This fiddle is now updated with the correct code</p>
  
  <p><a href="http://jsfiddle.net/hatsand/Yf3xW/" rel="nofollow">Jsfiddle Demo</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          #wrapper {
              width: 80em;
          }
  
          .image {
              width: 10em;
              height: 10em;   
              display: block;
              position: relative;
              left:5px;
          }
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $(".image").click(function() {
              if ($('this').css('left') =='5px') {                    
                  $(".image").animate({"right": "300px"},3000);
              else
                  $(".image").animate({"left": "300px"},3000);    
              }
          });     
      });     
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;section id="gallery"&gt;          
              &lt;img id="avery" class="image" src='images/OAI.jpg' alt= "On Avery Island Album Art"&gt;
              &lt;img id="overthesea" class="image" src='images/ITAOTS.jpg' alt="In the Aeroplane Over the Sea album art"&gt;   
              &lt;img id="beauty" class="image" src='images/beauty.jpg' alt="Beauty Demo Album Art"&gt;
              &lt;img id="everthingIs" class="image" src='images/everythingis.jpg' alt="Eveything Is EP Album Art"&gt;
          &lt;/section&gt;
      &lt;/div&gt;  
  &lt;/body&gt; 
  &lt;/html&gt;                 
  </code></pre>