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即可。