jquery动画效果问题答案

【问题标题】：Jquery animation effect questionjquery动画效果问题
【发布时间】：2010-07-17 09:52:35
【问题描述】：

我需要一些关于如何为以下内容制作动画的帮助：

如果 box1 在 2000 毫秒内完成淡入淡出，那么就是开始为 box2、box3 和 box4 设置动画的时间了p> $(文档).ready(函数(){ $('#box1').fadeIn(2000); $('#box2').fadeIn(2000); $('#box3').fadeIn(2000); $('#box4').fadeIn(2000); });

我该怎么做，或者给我一些链接。我是 jquery 的菜鸟

谢谢大家

【问题讨论】：

标签： jquery

【解决方案1】：

这个问题虽然不清楚，但您可以使用.delay() 来简化：

$(function() {
  $('#box1').fadeIn(2000);
  $('#box2').delay(2000).fadeIn(2000);
  $('#box3').delay(2000).fadeIn(2000);
  $('#box4').delay(2000).fadeIn(2000);
});

See it in action here。如果你的意思是一个然后另一个，然后另一个，只需更改延迟，如下所示：

$(function() {
  $('#box1').fadeIn(2000);
  $('#box2').delay(2000).fadeIn(2000);
  $('#box3').delay(4000).fadeIn(2000);
  $('#box4').delay(6000).fadeIn(2000);
});

See it in action here。或者，使用它传递给回调的 index 参数，使用 .each() 将其缩短一点，如下所示：

$(function() {
  $('#box1, #box2, #box3, #box4').each(function(i) {
    $(this).delay(2000*i).fadeIn(2000);
  });
});

See it in action here。或者，进一步改进它，给它们一个类，使其更具可扩展性，如下所示：

$(function() {
  $('.box').each(function(i) {
    $(this).delay(2000*i).fadeIn(2000);
  });
});

Test that version here :)

【讨论】：

非常感谢。这就是我正在寻找的。 =)
实际上，每个示例的最后一个示例都非常酷。好主意。如果它使用一个类而不是 id，那么它可以很好地扩展到任意数量的元素。不错。
@Squeegy - 绝对！正在添加:) 需要我一点时间来制作示例页面

【解决方案2】：

$(document).ready(function(){
  $('#box1').fadeIn(2000, function() {
    $('#box2').fadeIn(2000, function() {
      $('#box3').fadeIn(2000, function() {
        $('#box4').fadeIn(2000);
      })
    })
  });
});

动画函数采用第二个参数，这是一个在完成时调用的函数。您可以使用它来链接动画。

尽管您可能希望以递归方式调用您传入盒子 id 的方法的方式进行设置，并设置链中的下一个直到它们全部淡入。除非您所拥有的只是4个盒子，那么上面的代码就可以了。

【讨论】：