淡出主播單擊並淡入href

我想知道是否有可能在兩個HTML文檔之間產生淡入淡出。我有幾個HTML頁面，但讓我們用兩個例子做一個例子。淡出主播單擊並淡入href

index.html, jobs.html

在兩個我都有一個菜單<a>按鈕。我想要做的是：

我點擊<a href="jobs.html" id="jobs">Jobs</a>和index.html（我目前的）淡出和jobs.html衰的東西像div秒之間，但與整個HTML文檔的衰落。

任何幫助，非常感謝。

來源

2013-08-02 supersize

你加載這個jobs.html通過ajax？ – Brad

不！我正在做一個頁面切換！ – supersize

[This looks cool]（http://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/） – musefan

使用CSS隱藏身體。
淡入身體
點擊一個按鈕，並抓住它的ID
淡出體
定位到新的URL

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     body{ 
      display: none; 
     } 
     .myBtn{ 
      cursor: pointer; 
     } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 

    <script> 
     $(function(){ 
      $('body').fadeIn(); 
      $('.myBtn').click(function(){ 
       url = $(this).attr('id') + '.html'; 
       $('body').fadeOut(function(){ 
        window.location = url; 
       });  
      }); 
     }); 
    </script> 
</head> 
<body> 
    <h1>index.html</h1> 
    <div class="myBtn" id="index">index</div> 
    <div class="myBtn" id="jobs">jobs</div> 
</body> 
</html>

http://jsfiddle.net/Dp4Hy/

PS。顯然，小提琴不會奏效，因爲您正嘗試導航到新頁面，但您仍然可以在開始時看到淡入淡出，並在您單擊按鈕時淡入淡出。只需要包含此腳本以供所有頁面使用。

來源

2013-08-02 14:25:41

這對我來說似乎很好。我會測試它！ – supersize

fadeOut不適用於Firefox！在Chrome和Safari上，它看起來不錯！ – supersize

我將更新上面的演示，但您需要做的只是將其切換到fadeOut的回調函數中的window.location部分。 –

是的，這是可能的，你可以追加HTML中DIV（就像你知道的），或者你可以使用iframe的，以經理的iframe標籤

來源

2013-08-02 14:23:07

底線的褪色，這是不可能沒有某種形式的預加載和與服務器端組件的交互

我個人會推薦PJAX。 http://pjax.heroku.com/它可以讓你不僅趕上事件並加載基於事件的文件，它會更新瀏覽器狀態，URL，標題，後退按鈕工程等使用它

例如網站來完成類似的操作 http://bleacherreport.com/articles/1716958-the-top-10-fantasy-qbs-for-2013 http://reciperehab.com/blog/post/the-6-best-salads-for-spring

*免責聲明，我沒有第二個...

來源

2013-08-02 14:25:21 Brad

我知道ajax會是最優雅的方式，但我確實希望儘可能簡單。只是jquery！無論如何，這將有助於我一段時間！ – supersize

創建您的定位標記並設置javascript onclick事件。調用你的fadeOut（）函數（我已經粘貼下面）當你點擊時你會希望它淡出，當下一頁加載時，你會希望它淡入：

jsfiddle：http://jsfiddle.net/HmGap/3/

HTML：

<script type="text/javascript"> 
window.onload=function(){fadeIn('body')}; 
</script> 

<div id="body"> 
    Content <br /><br /> 
    <a onClick="fadeOut('body')" style="cursor:pointer">Click Me to Fade Out</a> 
</div>

的Javascript：

// fadeEffects

var fade_in_from = 0; 
var fade_out_from = 10; 

function fadeIn(element){ 
    var target = document.getElementById(element); 
    target.style.display = "block"; 
    var newSetting = fade_in_from/10; 
    target.style.opacity = newSetting; 
    // opacity ranges from 0 to 1 
    fade_in_from++; 
    if(fade_in_from == 10){ 
     target.style.opacity = 1; 
     clearTimeout(loopTimer); 
     fade_in_from = 0; 
     return false; 
    } 
    var loopTimer = setTimeout('fadeIn(\''+element+'\')',100); 
} 
function fadeOut(element){ 
    var target = document.getElementById(element); 
    var newSetting = fade_out_from/10; 
    target.style.opacity = newSetting; 
    fade_out_from--; 
    if(fade_out_from == 0){ 
     target.style.opacity = 0; 
     target.style.display = "none"; 
     clearTimeout(loopTimer); 
     fade_out_from = 10; 
     return false; 
    } 
    var loopTimer = setTimeout('fadeOut(\''+element+'\')',100); 
    window.location.href = "link.html"; 
}

來源

2013-08-02 14:34:16 Jacques

淡出主播單擊並淡入href

回答

相關問題