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 ？