0

インラインJavascriptがロードされている既存のメニューシステムを、jQueryのみを使用して新しいより効率的なコードに変換しようとしています。

ロールオーバー画像のある横棒があります。ページに整数値を含む非表示フィールドがあります。ページが読み込まれると、対応するメニューに「スティッキー」バージョンの画像が読み込まれ、他のすべてのメニュー項目はマウスのEnterとLeaveで画像を交換します。大量のインラインJavascriptと、新しいサイトを作成するたびに変換するのが面倒なモンスターJavascriptファイルがロードされていました。

これをすべてjQueryに正常に変換し、スティッキーメニュー項目のクリックを無効にすることもできました。これで、いくつかの変数を設定するだけで、各サイトのデザインごとに簡単にカスタマイズできます。

うまく機能しています...

今、新しい問題が発生します。1つのデザインには、各メニュー画像の下に多数のスライド式引き出しが含まれています。スライドアニメーションは外部JSファイルによって処理され、メニュードロワー自体はそれぞれコンテナDIV内にネストされたコンテンツを含む単なるDIVです。

そこで、DIVをアニメーション化し、メニュー画像のマウスホバーでスライドインおよびスライドアウトするjQuery用の簡単なものをいくつか作成しました。

問題は、ドロワーを閉じないと、マウスがメニュー画像から離れてメニュードロワーに移動するという問題を解決できないように見えることです。「なぜ？」を理解しています...中に入る前に、アニメーションをトリガーして引き出しを閉じる画像を残しています。ホバーアニメーションをドロワーコンテナに適用すると、メニューの下にゾーンが作成され、アニメーションもトリガーされます。これも必要ありません。jQueryではより複雑な問題になっているようです。これはすべてインラインJavascriptで正常に機能していました...画像を閉じる機能をトリガーせずに、画像から隣接する開いている引き出しにマウスを移動するだけで済みました...引き出しのインライン「マウス入力」がキャンセルされたかのように画像の「マウスリーブ」。

助言がありますか？

ありがとうございました！

編集：

画像からドロワーに渡すときに.stop（true、false）を使用してこれを解決したと思います。これにより、アニメーションが開始する前に停止します。次に、通常のアニメーションを開始する前に画像を入力する場合も同じです...これは、ドロワーを離れて画像を入力することによってトリガーされるアニメーションを停止する効果がありますが、画像を通常どおりに入力する場合も何もしません。さらにテストしてから、サンプルコードを投稿します。

編集＃2：

「stop（）」と「delay（）」を使用してアニメーションを制御していますが、マウスを開くよりも速くマウスを入れることができれば、引き出しの開きをフリーズすることができます。150ミリ秒でインストールされます。しかし、今は問題を誇張するために300ミリ秒に設定しています。

ここに投稿された関連コード...

jsfiddle.net/qPLVp/8/

編集＃3：

ニールのおかげで、これは現在非常にうまく機能しています。アニメーションの速度が速くなると、マウスがメニュー画像をオーバーシュートしてドロワーに入る状態が最小限に抑えられます。しかし、それが起こった場合、引き出しは閉じません。これは、マウスの下から閉じるよりもはるかに優れています。

http://jsfiddle.net/elusien/PayFw/8/

編集＃4：

再びニールのおかげで、これは同じコードのより効率的なバージョンです...

http://jsfiddle.net/PayFw/9/

4

5 に答える 5

1

jsFiddleコードを変更して機能させました。基本的に、データオブジェクトを#menu要素に添付しました。この引き出しを開くと、オブジェクトは{opening: true}です。ドロワーが完全に開いている（アニメーションが完了している）場合、オブジェクトは{opening: false}です。引き出しに入るときにこれをチェックし、間違っている場合はアニメーションを停止します。それが本当なら、私はアニメーションを止めません。

コードは次のとおりです。

    function enter(event) { // mouseenter IMG
        // removed image rollover code

        $('#menu').data({opening: true}).stop(true, false).animate({
            top: '0',
            opacity: 1
        },{
            duration: 300  // slow the opening of the drawer
        },
        function(){$(this).data({opening: false});}
        );
    };
    function leave(event) { // mouseout IMG
        // removed image rollover code

        $('#menu').delay(400).animate({
            top: '-'+$ht+'px',
            opacity: 0
        },{
            duration: 600
        });
    };

    $('#menu').hover(
        function (){ // mouseenter Menu drawer
            if (!$(this).data('opening')) {
                $(this).stop(true, false);
            }
        },
        function (){ // mouseout Menu drawer
            $(this).delay(400).animate({
                top: '-'+$ht+'px',
                opacity: 0
            },{
                duration: 600    
            });

       }
   );

これで正常に動作するようになりました。これに照らして、「遅延」の一部をやり直したい場合があります。

于 2011-02-07T15:06:31.130 に答える
1

スパークリー、

私は物事を行う別の方法を思いついた。基本的に、「ボタン」と「説明」の上に透明なマスクを置き、これに「マウスリーブ」イベントを使用します。

HTML：

<body>
<div id="Container" class="menuContainer" style="position: relative">
<div id="menumask">&nbsp;</div>
<!-- this simulates the menu rollover image -->
<div id="menuitem" style="position:absolute; background-color:#ff00ff; top:10px; width:200px; height:50px; text-align:center;">
    <b>MENU ITEM</b>
</div>

<!-- this is the drawer -->
    <div id="menu" class="menuContent">
        <br/>
        <p>Content of the menu drawer.</p>
        <br/>
        <p>Bla bla bla </p>
        <br/>
        <p>Bla bla bla Bla.</p>
        <br/>
        <p>Bla bla bla Bla bla.</p>
        <br/>
        <p>Bla bla bla Bla bla bla Bla bla.</p>
    </div>

Javascript：

$(document).ready(function() {
    $('#menuitem').bind('mouseenter', enter);
    $('#menumask').bind('mouseleave', leave);

    $('#menu').css({
        height: '500px',
        position: 'absolute',
        paddingTop: '50px',
        width: '200px',
        backgroundColor: '#080',
        zIndex: -1
    }).hide();
    $('#menumask').css({
        height: '550px',
        width: '200px',
        opacity: 0.99,
        position: 'absolute',
        fontSize: '20000px',
        overflow: 'hidden',
        zIndex: 2
    }).hide();

    function enter(){
        $('#menumask').show();
        $('#menu').stop(true,true).animate({height: 500}, 'slow');
    };
    function leave(){
        $('#menumask').hide();
        $('#menu').stop(true,true).slideUp({height:   0}, 'slow');};  
});

これをメニューシステムの基礎として使用できます。

よろしくニール

于 2011-02-09T19:24:06.883 に答える
0

現在または将来、DOMイベントにハンドラーをアタッチする.delegate（）関数を探しているようです。

$(".menuItem").delegate(".subMenu","hover", function(){ $(this).show(); });

.delegate（）関数とそのバディ.live（）の詳細については、http：//api.jquery.com/delegate/を参照してください。

于 2011-02-06T21:03:17.517 に答える
0

コードを見ずに、次のことが機能するかどうかを知ることは困難です。

hover()引数として2つの関数を取り、最初の関数は画像を入力したときに実行され、2番目の関数は画像を入力したときに実行されます。画像を残すとき。

おそらく、引き出しを非表示（閉じる）にする2番目の関数を設定しました。の前に少し遅延を追加し（たとえばdelay(100)）hide()、ドロワー自体にホバーイベントを設定して（最初の関数の引数で）アニメーションキューstop(true, true)を停止します-これによりドロワーが閉じられなくなり、2番目の関数で-ドロワーが閉じますあなたがそれを終了するとき。

于 2011-02-06T21:12:23.787 に答える
0

ねえ、私は同じことを達成しようとしているときにこの投稿に出くわしました。2017年になり、廃止されたため、ソリューションを終了する可能性があると考え.delegateました。データを使用して、移行がまだ有効であるかどうかを追跡するのは面倒なようでした。

mouseleaveキーは、コールバックに渡された要素を使用してを取得することでしたelement.relatedTarget。

$('.myMouseoverElements').on('mouseover', function() {        

  activeElements = $('.elements.to.open')
  activeElements.addClass('open')

  activeElements.on('mouseleave', function(element) {

    var sustainElements = $('.elements.to.sustain.mouseover')
    var drawerShouldClose = !$(element.relatedTarget).is(sustainElements)

    if (drawerShouldClose) {
      activeElements.removeClass("open")
      activeElements.off("mouseleave")
    }
  })
})

助けてくれてありがとう！

于 2017-04-30T09:04:02.727 に答える