Question

I’m working on a project where I have a player and a playlist. Now I want to show/hide the playlist on hovering on the player itself. I’ve come so far that I can hide/show the playlist on hovering over a link. I’ve also put delay on the fade out of the playlist, but the problem is that I want the command to stop if the cursor is on the playlist itself. When you then move the mouse out, it should go away. See what happens now http://cpanel12.proisp.no/~annaryuh/player/annar.htm.

This is the script I have now:

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

});

This is the link to the a test page:
http://cpanel12.proisp.no/~annaryuh/player/annar.htm

Answer 1

I think I understand what you want, the link opens and closes the playlist, and moving the mouse out of the box closes it.

please try:

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