jQueryでページを終了するときにページ遷移を追加するには

Question

ユーザーがサイトをナビゲートするときにページが黒くなるサイトにトランジションを追加しようとしています。

これを達成する最良の方法は、黒をページにマスクしてjQueryでアニメーション化するdivを作成することでした。

これまでのところ、私は効果「黒にフェード」のためのコードを作成するために管理してきました...

$(document).ready(function(){ 
    // Insert mask after container 
    $('.container').after('<div class="mask"></div>'); 
    // Delay the fadeOut effect for half a second so you can actually see it 
    $('.mask').animate({opacity: 1.0}, 500) 
    // Slowly make the mask dissapear 
    .fadeOut('slow'); 
}); 

しかし、私は「黒からフェード」のページを取得するかどうかはわかりませんユーザーはサイトの別の部分をクリックします。

私はクリック機能を使用する必要があることを理解していますが、「黒にフェードする」アニメーションが表示されるように、ページの読み込みを遅らせるにはどうすればよいですか？

お時間をありがとうございました。

Answer 1

click（）イベントにバインドしてfalseを返すことで、デフォルトのアクション（リンクのhrefに向かうページ）を防ぐことができます。次に、ドキュメントの位置をリンクのハイパーテキスト参照に設定するfadeIn（）メソッドにコールバックをバインドできます。

あなたはこのような何かを行うことができます：

$('a').click(function(){ 
    var url = $(this).attr('href'); 

    $('.mask').fadeIn('slow', function(){ 
    document.location.href = url; 
    }); 

    return false; 
}); 

感謝を！ジェイミー

Answer 2

は、クリックイベントをキャプチャし、起きてから、デフォルトの動作を妨げる：

$('a').click(function(event) { 
    event.preventDefault(); 

    // mask effect code here 
}); 

event.preventDefault()は非jQueryのJavaScriptでonclick='function(); return false;'を使用してに似ています。