如何使用jQuery離開頁面時添加頁面轉換

我試圖向用戶瀏覽網站時頁面淡入黑色的站點添加轉換。如何使用jQuery離開頁面時添加頁面轉換

我決定實現這個目標的最佳方式是創建一個div，它將掩蓋黑色頁面，然後使用jQuery對其進行動畫處理。

到目前爲止，我已經成功地爲「暗下」的效果創建代碼...

$(document).ready(function(){ 
    // Insert mask after container 
    $('.container').after('<div class="mask"></div>'); 
    // Delay the fadeOut effect for half a second so you can actually see it 
    $('.mask').animate({opacity: 1.0}, 500) 
    // Slowly make the mask dissapear 
    .fadeOut('slow'); 
});

但我不知道如何讓頁面「從黑色淡入淡出」的時候用戶點擊該網站的另一部分。

我知道我不得不使用點擊功能，但是如何延遲加載頁面以便能夠看到「淡入黑色」動畫？

非常感謝您的時間。

來源

2009-05-21 Mindthetic

您可以綁定到click（）事件並使其返回false，從而阻止默認操作（頁面轉到鏈接的href）。然後，您可以將回調綁定到將文檔位置設置爲鏈接的超文本引用的fadeIn（）方法。

你可以做這樣的事情：

$('a').click(function(){ 
    var url = $(this).attr('href'); 

    $('.mask').fadeIn('slow', function(){ 
    document.location.href = url; 
    }); 

    return false; 
});

謝謝！傑米

來源

2009-05-21 16:30:54

捕獲click事件，防止發生默認行爲：

$('a').click(function(event) { 
    event.preventDefault(); 

    // mask effect code here 
});

的event.preventDefault()類似於非的jQuery JavaScript的使用onclick='function(); return false;'。

來源

2009-05-21 16:36:53

無需傳遞事件對象或調用preventDefault（） - jQuery偵聽返回值，如果爲false，則會自動禁用該事件。 – 2009-05-21 16:38:55

如何使用jQuery離開頁面時添加頁面轉換

回答

相關問題