用函數淡入整個HTML頁面？

我想要實現的是在整個HTML頁面淡入淡出，現在它顯得很快。用函數淡入整個HTML頁面？

這裏是我的代碼看起來像現在，我點擊我的div：

<a href="#" onclick="loadPage()">Hyperlink</a>

用來初始化一個JavaScript函數，然後將加載我的HTML頁面到這個div：

<div id="pageContent"> </div>

這裏的功能：

function loadPage() 
{ 
    var fullHeight = window.screen.availHeight - 265; 
    var objectOne = '<object style="width:100%;height:'; 
    var objectTwo = ';" type="text/html" data="test.html" ></object>' 
    document.getElementById("pageContent").innerHTML=objectOne+fullHeight+"px"+objectTwo; 
}

附加信息： 我對jQuery庫還不熟悉，但是我會接受一個使用它的解決方案，如果它描述了它發生的事情，我想學習。

來源

2014-04-04 Hummelmannen

你函數名以及onclick處理程序不要」 t匹配。 – Faust

剛剛輸入代碼時發生了錯字，修正了它。 – Hummelmannen

jQuery讓事情變得簡單。

加入jQuery來使用

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

頁給你的錨的ID

<a id="trigger" href="#" onclick="loadPage()">Hyperlink</a>

的jQuery：

$('#trigger').click(function() { 
$('#pageContent').fadeIn(); 
});

（注：：確保事業部隱藏在頁面加載）

來源

2014-04-04 06:55:23 James

你是什麼意思「隱藏」？ – Hummelmannen

對於您想要淡入的內容，使用CSS術語「display：none」。要淡入頁面，它必須首先處於「display：none」狀態，也稱爲隱藏狀態。上面的jQuery函數會將該狀態設置爲「display：block」，您可以通過在fadeIn函數中以毫秒爲單位來控制轉換花費多長時間。示例$（'＃pageContent'）。fadeIn（1000）將在一秒鐘內淡入。 – James

這裏是jQuery的解決方案

http://jsfiddle.net/e4PZX/3/

這段代碼做的伎倆：

$('#fadeIn').click(function() { 
    $('#wholePage').fadeOut(); 
});

來源

2014-04-04 06:56:14

用函數淡入整個HTML頁面？

回答

相關問題