0

おそらく簡単な質問があります: /コード: http://jsfiddle.net/FZufj/8/ /

フェード メニューの簡単なコードがあります。

メニューと「メニューボタン」の両方にマウスオーバーした後にメニューをフェードさせたい難しいことではありませんが、マウスがメニューからメニューボタンに移動したときにフェード効果を無効にする方法がわかりません

メニューからマウスを移動した後、メニューをフェードアウトさせたい。

私がjQueryの初心者であることを理解していただければ幸いです。

ありがとう

4

2 に答える 2

0

デモ: http://jsfiddle.net/wdm954/FZufj/20/

私はあなたがこれについて間違った方法で行っていると思います。メニュー ボタンとメニュー オプションを同じ要素にグループ化すると、ホバーは両方に適用されます。ここでは、ボタンに を使用し、ドロップダウン メニューにspanネストされた を使用しています。ul

<div class="topbar">
    <ul class="menu">
        <li>
            <span>Option 1</span>
            <ul class="sub">
                <li>Sub Menu 1</li>
                <li>Sub Menu 2</li>
                <li>Sub Menu 3</li>
            </ul>
        </li>
    </ul>
</div>

ホバーはラッピング リスト アイテムに適用され、子要素に継承されます。

$('.menu > li').hover(function() {
    $(this).children('.sub').fadeIn();
}, function() {
    $(this).children('.sub').fadeOut();
});
于 2011-06-08T18:39:10.573 に答える
0

現在のアニメーションを停止するには、.stop(true,false) を使用する必要があります。

これがコードの作業バージョンです。(1 つのセレクターを使用して .menu と .button の両方を選択することにより、二重コードを削除しました

$(document).ready(function() { // This sets the opacity of the thumbs to fade down to 60% when the page loads
    $(".menu").fadeTo(600, 0.01);

    $(".menu, .button").hover(function() {
        $(".menu").stop(true,false).fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
    },  function() {
        $(".menu").stop(true,false).fadeTo("slow", 0.01); // This sets the opacity back to 60% on mouseout
    });
});

ここの例も更新しました：http://jsfiddle.net/FZufj/19/

于 2011-06-08T18:17:06.497 に答える