jQuery hide() then animate() then show()

Question

Why doesnt this work

$("#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");
    }

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.

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.

SOLVED:

$("#right").click(function() {
  $("#sliderWindow").find("img").each(function() {
     if (this.offsetLeft >= 1220) {
        $(this).css("left", "-320px");
    }
    $(this).animate({left: "+=220px"}, "slow");
  });
});

Answer 1

First of all, it's not going to do any good to animate something after you hide it. :)

Secondly, I believe what you're looking for is animate's callback function. If you want something to happen only after the animate is complete you do it like this...

$(this).animate({"left": "-320px"}, "slow", function(){ do_something; });

Let's say <div id="obj"> already has a "position:absolute;", and you want it to move, then disappear...

$('#obj').animate({"left": "-320px"}, "slow", function(){ $(this).hide(); });

Answer 2

Solved this with the following:

$("#right").click(function() {
$("#sliderWindow").find("img").each(function() {
  if (this.offsetLeft >= 1220) {
    $(this).css("left", "-320px");
  }
  $(this).animate({left: "+=220px"}, "slow");
});
});

Answer 3

all animations all executed instantly - > you need to use jQuery

   delay()

or

 setTimeout(function(){},timeInMillis);

for example

if(left === "1220px") {
  var $this = $(this);
  $this.hide(200).delay(200).animate({"left": "-320px"}, 300,function(){
   $this.show();
  });
}

Answer 4

Why not just set the new position, since that's what it sounds like you're trying to do.

  if(left === "1220px") {
    $(this).css("left", "-320px");
  }

Answer 5

Try using ...

if( parseInt(left) > 1219 ) {
   $(this).css("left", "-320px");
}

... in case it's not exactly 1220px ?