1

('#login_display')クリックするとサブメニュー '('.box_login')` にスライドするリンクがあります。私が望むのは、誰かがリンクまたはサブメニューからマウスアウトすると、サブメニューがスライドして戻ることです。

このコードは機能していますが、それを行うためのより良い方法はありますか? マウスがサブメニュー('.box_login') を離れてリンク('#login_display') に移動すると、リンクがサブメニュー('.box_login') を開き、マウスアウトがそれを閉じるため、少し遅れます。 ...

ありがとう

ここにスクリプトがあります：

$('#login_display').hover(function() {
    $('.box_login').slideDown('normal');
}, function() {});

$('.box_login').hover(function() {}, function() {
    $('.box_login').slideUp('normal');
});
4

3 に答える 3

1

リンクとスライド ダウン div をコンテナーに配置します。次に、コンテナの mouseleave イベントを使用して、上にスライドします。

http://jsfiddle.net/Whrec/1

<a class="login" id="login_display">Link</a><br/>
<div class="box_login login">blah</div>

 

$('#login_display').mouseenter(function() {
    $('.box_login').slideDown('normal');
});

$('.box_login, #login_display').mouseleave(function(e) {
    console.log(e.toElement);
    if (!$(e.toElement).hasClass('login'))
        $('.box_login').slideUp('normal');
});
于 2012-02-09T04:03:09.150 に答える
0

mouseenterイベントとイベントのみを使用して単純化できmouseoutます。キャッシュも$('.box_login')。次に$(this)、繰り返しの代わりに使用し、デフォルトの速度である$('.box_login')ため、最後に削除します。'normal'パフォーマンスは少し向上しますが、これ以外にできることはあまりないと思います。HTML を投稿すると、パフォーマンスがさらに向上する可能性があります。

var $boxLogin = $('.box_login'); // Cache for speed

$('#login_display').mouseenter(function(){ 
    $boxLogin.slideDown();
});

$boxLogin.mouseout(function(){ 
   $(this).slideUp();
});
于 2012-02-09T03:54:53.840 に答える
0

あなたのサイトを見ると、これがあなたに最適です。これを試して。

$('#login_display').hover(function() {
    clearTimeout($(this).data('mouseovertimer'));
    clearTimeout($('.box_login').data('mouseovertimer'));
    $('.box_login').slideDown('normal');
}, function() {
    var $this = $(this);
    $this.data('mouseovertimer', setTimeout(function(){
         $('.box_login').slideUp('normal');
    }, 100));
});

$('.box_login').hover(function() {
    clearTimeout($('#login_display').data('mouseovertimer'));
}, function(){
    var $this = $(this);
    $this.data('mouseovertimer', setTimeout(function(){
         $this.slideUp('normal');
    }, 100));
});

デモ

于 2012-02-09T04:34:17.350 に答える