jQuery的动画效果的问题

我需要在此方面的帮助，我如何可以动画如下：

如果BOX1做在2000毫秒的衰落则是启动动画BOX2的BOX3时间和box4jQuery的动画效果的问题

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

我该怎么做，或者给我一些链接。我在jQuery的

小白谢谢大家

来源

2010-07-17 Jorge

的问题是一个，但目前还不清楚，但可以使用.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 :)

来源

2010-07-17 10:03:16

太谢谢你了。这就是我所看到的。 =） – Jorge 2010-07-17 10:06:31

其实每个最后一个例子都很酷。好主意。如果它使用了一个类而不是id，它可以扩展到任何数量的元素。尼斯。 – 2010-07-17 10:07:19

@Squeegy - 绝对！正在添加:)使我有点做示例页面 – 2010-07-17 10:10:07

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

动画功能采取了第二个参数，这是一个被称为上完成的功能。你可以用它来链接动画。

虽然你可能想要设置它的方式，它递归调用一个方法，你传入的方块ID，并设置链中的下一个，直到它们全部淡入。除非你有过是4盒，那么上面的代码是好的。

来源

2010-07-17 09:56:59

jQuery的动画效果的问题

回答

相关问题