jQuery hide() 然后 animate() 然后 show()答案

【问题标题】：jQuery hide() then animate() then show()jQuery hide() 然后 animate() 然后 show()
【发布时间】：2012-02-09 17:24:22
【问题描述】：

为什么这不起作用

$("#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 到达绝对位置 left:-1220px，将其移回起始位置 left:-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");
  });
});

【问题讨论】：

能否贴出完整的代码
为什么要在隐藏时设置动画？有点违背了目的。
定义在哪里？它本身没有任何意义。你说的不起作用是什么意思？
真的，它没有任何意义，你想动画它，然后显示..你为什么不改变css属性然后显示它..你甚至不需要隐藏它，只需更改pos，效果一样
是的，这个问题现在没有多大意义，你会使用“编辑”链接并澄清它吗？

标签： javascript jquery css jquery-animate show-hide

【解决方案1】：

首先，隐藏后的动画并没有任何好处。 :)

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

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

假设<div id="obj"> 已经有一个“位置：绝对；”，并且您希望它移动，然后消失...

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

【讨论】：

【解决方案2】：

通过以下方式解决了这个问题：

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

【讨论】：

【解决方案3】：

所有动画都立即执行 -> 你需要使用 jQuery

   delay()

或

 setTimeout(function(){},timeInMillis);

例如

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

【讨论】：

但是是的，正如其他人评论的那样，这并没有多大意义

【解决方案4】：

为什么不直接设置新位置，因为这听起来像是您正在尝试做的事情。

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

【讨论】：

这正是我想要做的，但我在来到 SOF 之前尝试使用上面完全相同的代码，但没有成功。

【解决方案5】：

尝试使用 ...

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

...万一不是1220px？

【讨论】：