設計資源

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

概念上就是先將超連結阻擋下來( 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;
    });
});