2

ユーザーがサイト内を移動するとページが黒くフェードするサイトにトランジションを追加しようとしています。

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

これまでのところ、「フェードトゥブラック」エフェクトのコードを作成することができました...

$(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');
});

しかし、ユーザーがサイトの別の部分をクリックしたときに、ページを「黒からフェード」させる方法がわかりません。

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

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

4

2 に答える 2

6

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

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

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

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

  return false;
});

ありがとう！ジェイミー

于 2009-05-21T16:30:54.273 に答える
1

クリックイベントをキャプチャし、デフォルトの動作が発生しないようにします。

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

  // mask effect code here
});

これは、jQuery以外のJavaScriptでのevent.preventDefault()使用に似ています。onclick='function(); return false;'

于 2009-05-21T16:36:53.780 に答える