JQuery在悬停时隐藏/显示播放列表

Question

我正在开发一个项目，其中有一个播放器和一个播放列表。现在我想显示/隐藏播放列表，将其悬停在播放器上。我到目前为止，我可以隐藏/显示播放列表悬停在链接上。我也拖延了淡出播放列表，但问题是如果光标位于播放列表本身，我希望命令停止。当你将鼠标移出时，它应该消失。看看现在发生了什么http://cpanel12.proisp.no/~annaryuh/player/annar.htm。

这是剧本我现在：

$(document).ready(function(){ 

    $(".jp-playlist").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').hover(function(){ 
     jQuery('.jp-playlist').delay(200).fadeIn(); 
     }, function() { 
     jQuery('.jp-playlist').delay(1000).fadeOut(); 
    }); 

}); 

这是链接到一个测试页面： http://cpanel12.proisp.no/~annaryuh/player/annar.htm

Answer 1

我想我明白你想要什么，链接打开并关闭播放列表，将鼠标移出盒子将其关闭。

请尝试：

http://jsfiddle.net/YupEe/5/

Answer 2

是否

$('#jp_player_1').hover({...}); 

不行？

另外，如果你使用jQuery 1.7+，使用

$('#jp_player_1').on({ 
    mouseenter: function(){...}, 
    mouseleave: function(){...} 
}); 

Answer 3

使用setTimeout函数。

var fadeOutFunction; 
var fadeInFunction; 

$(document).ready(function(){ 

    $(".jp-playlist").hide(); 
    $(".show_hide").show(); 

    $('.show_hide').hover(function(){ 
     clearTimeout(fadeOutFunction); 
     fadeInFunction = setTimeout(function(){jQuery('.jp-playlist').fadeIn(); },200); 
     }, function() { 
     clearTimeout(fadeInFunction); 
     fadeInFunction = setTimeout(function(){jQuery('.jp-playlist').fadeOut();}, 1000); 
    }); 

}); 

并且，如果您希望在光标位于播放列表本身时停止该命令，只需为播放列表onhover事件添加clearTimeout即可。