ページを離れる前にクリックしたリンクをアニメーション化するにはどうすればよいですか？ここで

Question

は私が達成したいものです。

1. をHTMLリンクをクリックすると、私はリンクが新しいウィンドウ/タブで開かれている場合、アニメーションはいけない
2. ページを離れる前に、それをアニメーション化します開催場所

どのように私はこれを達成しますか？

Answer 1

あなたはjavascript

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

を使用することができますしかし、あなたのボタンがリンクされている場合は、デフォルトのアクションを停止する必要があります。

Answer 2

クリックイベントをキャプチャし、デフォルトのアクションを防止し、アニメーションを行い、新しいページを読み込む必要があります。

（a jsfiddleとして入手可能）jqueryの使用している場合：アップデート

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

を：コメントで述べたような状況を占めHere's the new jsfiddleは、更新されたコードのためにそこに行きます。このトリックは、CtrlキーまたはCommandキーの押下を検索し、いずれかのキーが押されていれば、新しく定義されたアニメーションクリックハンドラを中止することです。

注：jsfiddleのキー入力を検出するには、ウィンドウにフォーカスが必要です。これは、フレームが機能する前にフォーカスが必要であることを意味します。