jQuery hide（）然后是animate（）然后是show（）

Question

為什么不起作用

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

我正在滑動帶有動畫的div。 一旦最后一個div到達左側的絕對位置：-1220px，請將其移回到左側的起始位置：-320px。 它正在移動到正確的位置，但是我無法隱藏它。

編輯：我為一個隱藏的div設置動畫的原因是因為該動畫似乎並沒有改變css。 因為css沒有改變，所以我無法將最后一個對象回滾到行的前面。 由於我可以獲取animate（）來完成此操作，因此我試圖隱藏最后一個div並將其顯示在該行的開頭。

解決了：

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

Answer 1

首先，隱藏某物后對其進行動畫處理不會有任何好處。 :)

其次，我相信您正在尋找的是動畫的回調函數。 如果您希望僅在動畫完成后才發生某事，您可以這樣做...

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

假設<div id="obj">已經有一個“ position：absolute;”，並且您希望它移動然后消失...

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

Answer 2

解決了以下問題：

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

Answer 3

所有動畫全部立即執行->您需要使用jQuery

   delay()

要么

 setTimeout(function(){},timeInMillis);

例如

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

Answer 4

為什么不只是設置新位置，因為這聽起來就像您要嘗試的那樣。

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

Answer 5

嘗試使用...

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

...如果不完全是1220px ？