如何在離開頁面之前爲點擊鏈接設置動畫效果？

當用戶點擊一個HTML鏈接，我想如果鏈接在新窗口/標籤打開離開頁面
之前製作動畫，動畫不應該發生

我到底怎麼做到這一點？

2012-02-22 Johan Fredrik Varen

你可以使用JavaScript

$(function(){ 
    $(".btn").bind("click",function(){ 
    $(this).animate({'left': '100px'}, 100, function(){ 
    window.location.href = index.html 
    }) 
}) 
})

但是，你必須停止默認的動作，如果你的按鈕是一個鏈接。

來源

2012-02-22 21:54:50

我不確定第二部分 – 2012-02-22 21:57:50

沒有按鈕，只是鏈接。在鏈接的點擊事件中播放動畫並不是一個真正的選擇，因爲點擊事件不知道我是在同一個窗口（動畫應該播放）還是在新窗口中打開鏈接（動畫不應該播放）。 – 2012-02-22 21:59:02

您需要'返回false'或在click事件中調用'preventDefault'。 – jcubic 2012-02-22 22:03:47

您需要捕獲單擊事件，防止默認操作，執行動畫，然後加載新頁面。

如果使用jQuery（可作爲a jsfiddle）：

$('a').click(function (event) { 
    event.preventDefault(); 
    $(this).animate({ 
    //whatever 
    }, function() { 
    location.href = $(this).attr("href"); 
    }); 
});

更新：Here's the new的jsfiddle是佔在評論中提到的情況，去那裏更新的代碼。訣竅是查找ctrl或命令的按鍵，如果按下任一鍵，則中止新定義的動畫點擊處理程序。

注意：在jsfiddle中，窗口需要焦點才能檢測到按鍵，這意味着框架需要焦點才能工作。

來源

2012-02-22 22:04:03

感謝您的回覆，但我不認爲這符合要求＃2。如果用戶打開鏈接的上下文菜單並選擇「在新窗口中打開」，則鏈接在新窗口中打開而不播放動畫，這是應該的。但是，如果用戶按住CRTL/CMD並單擊鏈接，則您提出的方法將播放動畫並在同一窗口中打開鏈接。 – 2012-02-22 22:21:53

我更新了jsfiddle，它應該處理你現在提到的情況。我在Mac上，所以我不能測試「CTRL」，但它應該工作（它與命令）。 – 2012-02-23 14:24:58

如何在離開頁面之前爲點擊鏈接設置動畫效果？

回答

相關問題