jQuery：fadein / fadeoutタイミングの問題

StackOverflow https://stackoverflow.com/questions/8418012

  •  29-10-2019
  •  | 
  •  

質問

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

私は完全に作業しているフェードを持っています、私がドロップダウンリストがローバーされているかどうかを判断しようとしているかどうかを判断しようとしているかどうかを判断しようとしています。ダウンリスト。

だから、ドロップダウンリストがフェードされ、ユーザがドロップダウン要素を入力しないと、ユーザがドロップダウンエレメントを入力した場合（クリックされたリンクを開くとフェードインチをトリガーする間）の場合、エレメントはフェードアウトします。その後、ドロップダウン要素を残すまでドロップダウンは表示されます。

これまでのコードはこれまでのコードです。 

$('#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)
        }
    })
})
.

役に立ちましたか？

解決

構造は問題があります。なぜあなたはマウスのままにリスナーを追加するのですか？

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

  • FADEINをMouseEnter に表示するように設定します。
  • SetTimeout（）を使用して~300-400msの遅延でMouseLeaveでフェデオウトを設定します。
  • それ以前の停止を使用して、実際のドロップダウンをMouseenterでフェード自体に設定します（停止（true、true）fadein（200）。>
  • MouseLeave のフェデオウトに実際のドロップダウンを設定します。

    実際には、これらのアニメーションのすべての前に停止（True、True）を使用する必要があります。

    この背後にある論理は、ユーザがドロップダウンオーバーをユーザにユーザを扱う場合、ドロップダウンはそれ自体がフェードされようとしているので、発生したフェードアウトをキャンセルしようとします（追加の200-300SECタイマーを追加しました）。

    もう1つの方法で、親タグ内にドロップダウンをネストしているので、ドロップダウンの中でホバリングされている間、とにかくフェードされません（これは純粋なCSSでも動作します）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top