更好的 jquery 悬停编码

Question

我有一个链接('#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');
});

Answer 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');
});

Answer 2

查看您的网站，这最适合您。试试这个。

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

演示

Answer 3

那么，您可以通过仅使用 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();
});