與ajax和jQuery的頁面轉換？

-2

嗨，我最近看到一個網站：http://soulland.com/ 我想知道他們是如何做的頁面轉換是：當點擊鏈接頁面淡出，然後等待頁面加載，然後完全消失他們是如何做到這一點？我有我的網站項目運行的代碼，但它並沒有給予同樣的結果：與ajax和jQuery的頁面轉換？

<script> 
    var speed = 800; 
    $('body').hide(); 
    $(document).ready(function() { 
     $('body').fadeIn(speed, function() { 
      $('a[href]').click(function(event) { 
       var url = $(this).attr('href'); 
       if (url.indexOf('#') == 0 || url.indexOf('JavaScript:') == 0) return; 
       event.preventDefault(); 
       $('body').fadeOut(speed, function() { 
        window.location = url; 
       }); 
      }); 
     }); 
    }); 
    </script>

我想兩種方法：第一種情況：淡入頁的輸入/輸出部分第二種情況：淡入/出整個頁面

來源

2014-05-11 Mustafa Najjar

我不會點擊在工作中隨機鏈接，但它實際上更改爲新頁面，還是SPA？你不能在頁面上查看源代碼嗎？ –

點擊商店。你會看到效果 –

mmm sry我沒有看到源，但如何能這樣工作！ –

一種方法如何使默認情況下使您的網頁不透明度等於0，並在整個頁面加載時將其更改爲1。不透明的改變與CSS過渡一起應該做的伎倆：

你的風格：

body { 
    opacity : 0; 
    transition : all ease 1s; 
} 

body.loaded { 
    opacity : 1; 
}

您的JavaScript：

$(document).ready(function() { 
    $("body").addClass('loaded'); 

    $(window).on('beforeunload', function() { 
    $('body').removeClass('loaded'); 
    }); 
});

Updated DEMO

來源

2014-05-11 21:44:12

如何檢查整個頁面是否已加載？ $（document）.ready（）.. ?? 如何去從鏈接中獲取URL，如何到達另一個頁面與淡入淡出,,等 –

是的，你可以通過使用jquery的事件來檢查它。你也不需要在你的鏈接中加入任何黑客，你唯一需要做的就是在你的頁面上包含這些樣式/腳本。我已經更新了演示版，並且可以檢查它如何與兩個頁面一起工作。 –

其實我在問題中犯了一個錯誤：並將問題更改爲： http://stackoverflow.com/questions/23611715/page-transition-with-jquery-ajax –

與ajax和jQuery的頁面轉換？

回答

相關問題