1

クリックしたときにメニューを非表示にしようとしています。メニューをクリックすると、サイドの特定の部分 (1 ページの Web サイト) にスライドします。上下にスクロールしているときにメニューを非表示にし、ページ上のポイントに到達したとき、またはスクロールを停止したときに再び表示するのが好きです。

$('.hoofdnav ul li a').click(function() {
    $('header.HoofdNav').fadeOut('slow', function() {
        setTimeout(showMenu, 1000);
    });
});
function showMenu() {
        $('header.HoofdNav').fadeIn('slow');
};

また、fadeOut/In の代わりに slideUp と slideDown を使用してみました

これは機能していますが、私が考えている方法ではありません。

  • スライドとフェードを同時に行う方法はありますか？
  • スクロール中にメニューを非表示にし、スクロールを停止したときに表示する方法は? （たぶんチュートリアルか何か）

tnx

4

1 に答える 1

1

スライドとフェードを同時に行う方法はありますか？

おそらく使用する必要があります.animate()。ここに参照があります。あなたの場合、次のようになります。

function hideMenu(){
 $('header.HoofdNav').stop().animate({
  opacity: 0,
  width: 0
 });
}

function showMenu(){
 $('header.HoofdNav').stop().animate({
  opacity: 1,
  width: '100%'
 });
}

スクロール中にメニューを非表示にし、スクロールを停止したときに表示する方法は? （たぶんチュートリアルか何か）

スクロールを追跡するには、 を使用できます.scroll()。ここで確認してください。スクロール中に複数回トリガーされるため、メニューを表示するために、たとえば 1 秒のタイムアウトを作成することをお勧めします。次に例を示します。

var timeout = false, afterScrollingWait = 1000; // here 1000 is time in milliseconds, play with it to make it the best for your app
$(document).scroll(function(){
 hideMenu();
 if (timeout) clearTimeout(timeout);
 setTimeout(showMenu, afterScrollingWait); 
});
于 2013-03-20T09:49:13.773 に答える