2010-06-16 99 views
2

我想淡入一個div內條目的背景 - 這是爲了向用戶顯示頁面加載時最新的條目。在頁面加載時淡入淡出

我希望它可以在頁面加載時完成,而不必點擊或懸停或任何東西,只要頁面加載。

我有這樣的:

$(document).ready(function() { 
    $('#box').fadeIn(5000, function() { 
    // Animation complete 
    }); 
}); 

是它像頁面加載?

任何幫助表示讚賞。

+0

頁面加載就像是文件準備好了,是不是工作? – 2010-06-16 17:45:47

+0

@kerry pageLoad和document.ready之間有區別 – 2010-06-16 17:48:44

回答

6

使用load事件,觸發頁面加載:

$(window).load(function() { 
    $('#box').fadeIn(5000, function() { 
    // Animation complete 
    }); 
}); 
+0

你能否解釋'$(document).ready(...)'和'$(window).load()之間的區別。 ..)'?我對jQuery仍然足夠新,並且之前沒有遇到過後者。 =) – 2010-06-16 17:52:31

+1

@ricebowl:當DOM(文檔對象模型)變爲ready(更早/更早)時,'ready'處理程序運行,而當包含DOM,圖像,幀等的頁面的所有資源都加載當涉及到圖像/幀。 – Sarfraz 2010-06-16 17:58:03

+0

啊,謝謝你=)(+1) – 2010-06-16 18:36:29

1

不是100%肯定,但你嘗試過

 
window.onload =function() { 
    $('#box').fadeIn(5000, function() { 
    // Animation complete 
    }); 
} 

0

布拉德,如果隱藏的內容您的代碼應工作首先,然後將其淡入。jQuery無法淡化已顯示的內容,即您無法淡出已隱藏的內容。

See example

$(document).ready(function() { 
    $('#box').hide().fadeIn(5000, function() { 
    // Animation complete 
    }); 
});