Page FadeIn和FadeOut轉換

我目前正在嘗試創建一個腳本，使單擊一個anchorlink時頁面之間的漸變過渡。我已經編寫了腳本，但似乎沒有用。Page FadeIn和FadeOut轉換

我的代碼如下所示：

$("body").load(function() { 
    $(this).fadeIn(200); 
}); 

$("a").click(function() { 
    $link = $(this).attr("href"); 
    $("body").fadeOut(200); 
    window.location.replace($link); 
});

它似乎並沒有使淡入淡出和過渡。這仍然是正常的頁面加載。

來源

2016-02-12 Jens Kvist

什麼不起作用？ – madalinivascu

它沒有做出淡入淡出的過渡。它看起來像任何其他頁面加載。 –

ajax加載函數需要第一個參數加載html的鏈接 – madalinivascu

首先隱藏在頁面加載的頁面的主體，然後你需要放置在fadeOut

功能齊全的轉向線試試這個代碼：

$(document).ready(function() { 
    $('body').hide().fadeIn(200); 
    $("a").click(function(e) { 
     e.preventDefault(); 
     $link = $(this).attr("href"); 
     $("body").fadeOut(200,function(){ 
      window.location = $link; 
     }); 
    }); 
});

來源

2016-02-12 11:26:48 madalinivascu

您需要最初隱藏該元素，或者使用.hide()或使用CSS display:none;。

$(document).ready(function() { 
    $('body').hide().fadeIn(200); 
});

來源

2016-02-12 11:24:31

啊，你說得對！謝謝！ –

爲了防止在DOM準備好時觸發'hide（）'引起的初始閃爍，CSS'display：none'可能是更好的解決方案。 –

你必須使用setTimeout來計時window.location.replace()在當前body已經消失之後執行：

$("a").click(function() { 
    $link = $(this).attr("href"); 
    $("body").fadeOut(200); 
    setTimeout(function(){ 
     window.location.replace($link); 
    },200); 
    return false; 
});

記得在函數結束時返回false否則鏈接點擊的默認動作，即重定向在任何其他與錨點關聯的動作之前。

但是，真誠的，這會給你一個平滑的淡出效果，但不會對重定向的頁面產生平滑的效果，除非它由你來實現。

來源

2016-02-12 11:29:15 anuvab1911

Page FadeIn和FadeOut轉換

回答

相關問題