0

これは単純なナビゲーション バー用の JavaScript ですが、クリックする前にドロップダウンが消えるという問題があるため、マウスがバーを離れてから非表示になるまでの遅延を追加したいと考えています。

どうすればいいですか？

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function () {
            // Delay on hiding should go here
            $(this).find("ul").hide().animate({ opacity: 0 }, 200);
            $(this).removeClass("active");
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });
</script>

助けてくれる人に前もって感謝します

PS これはおそらく非常に明白ですが、私は JavaScript についてほとんど知りません。:L

4

6 に答える 6

3

シンプルなナビゲーションバーがあります

その場合はJavaScriptを使用しないでください。これはCSSで実行でき、実行する必要があります。CSSトランジションとセレクターを使用すると、必要なものを正確に定義できます。

CSS3のDelay：Hover？も参照してください。そしてそこからの優れた例。

于 2012-04-09T18:14:14.620 に答える
2

のような巨大な関数は使用しないでくださいdelay()。を使用するだけsetTimeout()です。

var that = this
setTimeout(function() {
    $(that).hide() // Do your stuff, just don't forget that "this" has changed
}, 1000) // Define your delay in milliseconds here

内の関数はsetTimeout、2番目の引数として指定された遅延の後に実行されます。

于 2012-04-09T17:58:50.043 に答える
2

あなたはこのようにそれを行うことができます。このdelay()方法を使用して遅延を設定し、遅延.stop(true)中にユーザーが出入りする場合に備えて、両方のホバー機能で使用します。キューに入れられた.stop(true)アニメーションをすべてクリアします。fadeIn()また、コードをとに切り替えました。これは、必要に応じfadeOut()て自動的にshow()とhide()を実行するためです。

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").stop(true).fadeIn(400);
        }, function () {
            // Delay on hiding should go here
            var self = $(this);
            self.find("ul").stop(true).delay(1500).fadeOut(400, function() {
                self.removeClass("active");
            });
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });
</script>
于 2012-04-09T18:00:49.777 に答える
1

とても興味深い。マウスアウトするまで、何も隠れません。 フィドル

于 2012-04-09T22:49:52.077 に答える
1

次のようなことができると思います：

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function () {
            // Delay on hiding should go here
            $(this).find("ul").hide().delay(1000).animate({ opacity: 0 }, 200, function() {
                $(this).removeClass("active");
            });  
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });
</script>
于 2012-04-09T17:54:09.547 に答える
1

delay() を使用できます。

<script type="text/javascript">
    $(document).ready(function () {
        // Navigation bar drop-down
        $("nav ul li").hover(function () {
            $(this).addClass("active");
            $(this).find("ul").show().animate({ opacity: 1 }, 400);
        }, function () {
            // Delay on hiding should go here
        $(this).find("ul").delay(5000).fadeOut();
            $(this).removeClass("active");
        });
        $('nav ul li ul li:first-child').prepend('<li class="arrow"></li>');
        $('nav ul li:first-child').addClass('first');
        $('nav ul li:last-child').addClass('last');
        $('nav ul li ul').parent().append('<span class="dropdown"></span>').addClass('drop');
    });

</script>
于 2012-04-09T18:04:31.373 に答える