更好地编写jquery悬停

时间:2012-02-09 03:46:25

标签: jquery slidedown slideup jquery-hover

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

3 个答案:

答案 0 :(得分: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');
});

答案 1 :(得分:0)

嗯,您可以仅使用mouseentermouseout事件进行简化。同时缓存$('.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();
});

答案 2 :(得分: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));
});

<强> Demo