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

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

• javascript
• jquery
• css
• jquery-animate
• show-hide

• 1 can you post the plete code – zero Commented Feb 9, 2012 at 17:25
• 7 Why animate it when it's hidden? Kind of defeats the purpose. – SeanCannon Commented Feb 9, 2012 at 17:26
• Where's left defined? By itself it has no meaning. And what do you mean by doesn't work? – j08691 Commented Feb 9, 2012 at 17:27
• really, it doesnt make any sense, you want to animate it, then show.. why dont you change the css atribute and then show it.. you dont even needs to hide it, just change the pos, it'll make the same effect – Lefsler Commented Feb 9, 2012 at 17:27
• Yeah, the question doesn't make a lot of sense right now, would you use the "edit" link and clarify it? – T.J. Crowder Commented Feb 9, 2012 at 17:27

5 Answers 5

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 plete 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(); });

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

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

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

Try using ...

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

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