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的動畫效果的問題

回答

相關問題