淡入淡出對頁面加載的影響
[英]Fadein effect on page load
問題描述
有什么方法可以在加載頁面時使用jQuery的淡入/淡出效果？ 我不想隱藏div，而是調用fadeIn（）方法顯示這些div。 我希望頁面以這種效果加載。 有什么解決辦法嗎？ 非常感謝！
4 個解決方案
解決方案1
3 已采納 2012-01-12 21:27:35
Desription
您可以將整體的css opacity屬性設置為0 ，然后使用jQuery animate 。
我從來沒有想過，很好的問題！ 我已經對其進行了測試，並且可以正常工作！
樣品
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="PathToJqueryJsFile" />
<script type="text/javascript">
$(function () {
$("body").animate({ opacity : "1.0" });
});
</script>
</head>
<body style="opacity:0"">
Hello world
</body>
</html>
更多信息
更新
請注意隱藏元素，而不檢查用戶是否啟用了JavaScript。
解決方案2
2 2012-01-12 21:20:03
您必須等待頁面加載，然后才能執行類似的代碼。 將其放入其中，它將盡快運行：
$(document).ready(function(){
// here
});
解決方案3
1 2012-01-12 21:27:47
我建議不要使用fadeIn（）。 渲染元素和圖像時可能會導致顯示不一致
我已經為您創建了這個jsFiddle： http : //jsfiddle.net/Qrk6m/2/
我建議使用visible：hidden〜> visible：visible CSS，然后使用jQuery的animate（）函數
在CSS中：
#elementName{
visibility:hidden;
}
在JS Doc Ready Put中：
$(document).ready(function(){
$('#elementName').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},'slow');
});
無論哪種方式，您都可能不想顯示：none和fadeIn（）。
解決方案4
0 2012-01-12 21:25:09
我認為除非在默認情況下將要淡入淡出的div設置為隱藏，否則您將無法在負載上實現真正的fadeIn效果。
頁面加載時jQuery .fadeIn（）？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.