2

私が管理しているサイトには、クリックするとその下のドロップリストにフェードインするこのスタイルのリンクがあり、ユーザーがジャンルを選択できるようになっています。

フェードが完全に機能しています。私が直面している問題は、ドロップダウンリストに入らずにスタイル付きリンクからホバーした場合にドロップダウンリストを非表示にできるように、ドロップダウンリストがホバーされたかどうかを判断しようとすることです。

したがって、ドロップダウンリストがフェードインし、ユーザーがドロップダウンされた要素に入らない場合、要素はフェードアウトしますが、ユーザーがドロップダウンされた要素に入ると (フェードインをトリガーするクリックされたリンクを残したまま)、ドロップしますdown は、ドロップダウン要素を離れるまで表示されたままにする必要があります。

これが私がこれまでに持っているコードです:

$('#categories_link').live('click mouseleave', function(e){
    $('.categories').fadeIn(200, function(){
        $(this).live('mouseenter mouseleave', function(evnt){
            switch(evnt.type) {
                case "mouseenter":
                    $(this).stop(true, true)
                    $(this).data('visible', true)
                break;

                case "mouseleave":
                    $(this).data('visible', false)
                break;
            }
        })

        if(e.type == 'mouseleave') {
            if($('.categories').data('visible'))
                return;
            else
                $('.categories').fadeOut(200)
        }
    })
})
4

1 に答える 1

1

構造は非常に問題があります。マウスを離れたときにリスナーを追加するのはなぜですか?

あなたができる最善のことは

  • フェードインをマウス入力時に表示するように設定する
  • setTimeout() を使用して ~300 ～ 400 ミリ秒の遅延で mouseleave にフェードアウトを設定します
  • その前に停止を使用して、実際のドロップダウンをマウスエンターでフェードインするように設定します（つまり、stop（true、true）.fadeIn（200）が、イベントハンドラー内でこれが発生する前にclearTimeout（）を使用します。
  • mouseleave で実際のドロップダウンをフェードアウトに設定する

実際には、これらすべてのアニメーションの前に stop(true,true) を使用する必要があります。

この背後にあるロジックは、ユーザーがドロップダウンにカーソルを合わせると、ドロップダウンがフェードインしようとするため、キューに入れられたフェードアウトがキャンセルされます (200 ～ 300 秒のタイマーを追加しました)。

それを行う別の方法は、親タグ内にドロップダウンをネストすることです。そのため、ドロップダウン内にホバリングしている間、いずれにしてもフェードアウトしません (これは純粋な css でも機能します)。

于 2011-12-07T15:47:03.723 に答える