jQuery：點擊任何菜單鏈接，播放動畫，然後轉到鏈接的URL

Question

當點擊任何菜單鏈接時，我想在當前頁面上播放一個快速動畫，然後轉到網址被點擊的鏈接。

我會感謝專家的幫助！

Answer 1

防止默認行爲，播放動畫，然後將瀏覽器指向原始目標。

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 

    $('#whatever').animate({ 
     top: '300px' 
    }, 500, 
    function() { 
     window.location = href; 
    }); 
}); 

Answer 2

感謝你們倆，這個例子幫了我很大的忙！

我想知道如何擴大這個，讓我們說，我想要的#whatever 300px移動到頂部和後 - opacity：0;

所以基本上我想知道如何在執行href之前製作動畫序列。

我嘗試使用超時，但它不起作用。有了這個，我只能一次性「開火」。

---

編輯：

好吧，我想通了我自己。我不知道爲什麼它的工作原理（主要是因爲我有限的JavaScript知識），但它確實，這裏的腳本：

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 

    $('#whatever').animate({ 
     height: '500px' 
     }, 700); 
    $('#whatever').animate({ 
     width: '500px' 
     }, 1000); 
    $('#whatever').animate({ 
     opacity: '0' 
     }, 1200, 
    function() { 
     window.location = href; 
    }); 
}); 

貌似超時不necessarry，這些動畫顯示的序列。

如果我理解正確的話，該腳本的工作原理是這樣的：

1. 得到它的定義的鏈接不會有它的默認值
2. 有事吧
3. 在某事的最後一部分發生，鏈路接收回它的 默認值

---

編輯2： 好吧，讓我們更復雜一點。比方說，我想動畫兩個元素，但不是在同一時間。現在這看起來像是一個超時的情況，然後再次因爲這些功能中的每一個正在按順序發生，我可以通過沒有任何動畫來僞造超時。例如，我添加了200px寬的#block，起初我將它的寬度設置爲200px，所以沒有任何反應，這正是我想要的。但是應該有一個正確的方法來解決這個問題，誰能解釋一下這個問題？爲什麼這些動畫會以一個順序發生，以及如何設置超時（延遲動畫）的正確方法是什麼？

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 

    $('#whatever').animate({ 
     height: '500px' 
     }, 700); 
    $('#block').animate({ 
     width: '200px' 
     }, 1000); 
    $('#block').animate({ 
     width: '500px' 
     }, 1200); 
    $('#whatever').animate({ 
     width: '500px' 
     }, 1000); 
    $('#whatever').animate({ 
     opacity: '0' 
     }, 1200, 
    function() { 
     window.location = href; 
    }); 
});