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

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