title: jQuery hide() then animate() then show()
body: <p>Why doesnt this work</p>
  
  <pre><code>$("#right").click(function(){
    $("#sliderWindow").find("img").each(function(i) {
      var left = $(this).css("left");
      $("#imageContainer" + i).animate({"left": "+=220px"}, "slow");
      left = parseInt(left);
      left += 220;
      left = left + "px"; 
      $(this).css("left",left);
      left = $(this).css("left");
  
      if(left === "1220px") {
        //this is what doesnt work
        $(this).css("left", "-320px");
      }
  </code></pre>
  
  <p>I am sliding a row of divs with animate. Once the last div gets to absolute position left:-1220px, move it back to the start position left:-320px. It is moving to the correct position but I am having trouble hiding it.</p>
  
  <p>EDIT: The reason I am animating a hidden div is because the animation doesn't seem to be changing the css. Because the css isnt changing I cant roll the last objects back to the front of the line. Since I can get animate() to accomplish this I am trying to hide the last div and have it appear at the front of the line.</p>
  
  <p>SOLVED:</p>
  
  <pre><code>$("#right").click(function() {
    $("#sliderWindow").find("img").each(function() {
       if (this.offsetLeft &gt;= 1220) {
          $(this).css("left", "-320px");
      }
      $(this).animate({left: "+=220px"}, "slow");
    });
  });
  </code></pre>