文章 / 資源

網站設計資源分享
2019-07-25 JS技巧

網站前往下一個頁面(超連結)前加入轉場效果

網站前往下一個頁面(超連結)前加入轉場效果

概念上就是先將超連結阻擋下來( e.preventDefault();),在完成想要執行的效果後再透過location.href前往目標。

另外我們可以先過濾掉一些不需要效果的連結,像是另開視窗的連結,錨點的連結等...

[使用方式]
$('a').click(function(event) {
    if(this.href.match('javascript') == 'javascript' || this.href.match('#') == '#' || $(this).attr("target")=='_blank') return;

    // Remember the link href
    var href = this.href;

    // Don't follow the link
    event.preventDefault();

    // Do the async thing
    $(".something").fadeOut(300, function(){
       window.location = href;
    });
});

網站架設

WIIN快速建站 - 提供多種響應式企業版型,全站內容都可由後台管理 (公司簡介/最新消息/產品介紹/聯絡我們...等),還可自行新增獨立頁面!

本服務亦堤共客製化模板套用,設計稿切版製作,歡迎 設計公司 / 廣告行銷公司 / 活動公關公司 合作。

了解詳情