Question

我需要一些帮助，如何为下面的动画制作动画：

如果 box1 在2000ms内完成淡出，那么就可以开始为 box2 设置 box3 和 box4

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

我该怎么做，或给我一些链接。我是jquery的新兵。
谢谢大家

Answer 1

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

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

虽然您可能希望以递归方式调用传递方框ID的方法来设置它，然后它会在链中设置下一个直到它们全部淡入。除非您拥有的只是4个方框，那么上面的代码就可以了。

Answer 2

问题是但不清楚，但您可以使用.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。或者，使用它传递给回调的索引参数将.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：）

Jquery动画效果问题

2 个答案: