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

确实

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

不起作用？

此外，如果您使用的是jQuery 1.7+，请使用

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

Answer 2

使用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。

Answer 3

我想我理解你想要的东西，链接打开并关闭播放列表，然后将鼠标移出框就会关闭它。

请尝试：

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

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

3 个答案: