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

首先，在隐藏它之后动画一些东西不会有任何好处。：）

其次，我相信你正在寻找的是animate的回调函数。如果你想在动画完成后想要发生一些事情，你可以这样做......

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

让我们说<div id="obj">已经有一个“位置：绝对;”，你希望它移动，然后消失......

$('#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

所有动画都立即执行 - ＆gt;你需要使用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？

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

5 个答案: