Jquery mouse event

Question

I have no idea on how to fix seemingly a simple problem. If you hover over the album covers there fadesIn an ( i ) icon if you hover over the ( i ) icon there comes up an Tooltip but it doesn't stay up it fadesOut after 1,2sec. How could i fix this that the tooltip stays up when you hover over the ( i ) icon and fadesOut when mouse leaves the icon.

Example here: http://www.midnightlisteners.com

my code:

//      ( i ) Icon

  $(".play, .more-info").mouseenter(function(){
        clearTimeout($(this).data('timeoutIds'));
        $(this).next(".more-info").fadeIn(600);
    }).mouseleave(function(){
        var someElement = $(this);
        var timeoutIds = setTimeout(function(){
            someElement.next(".more-info").fadeOut('150');
        }, 1200); // giving a shorter time will reduce the fadeout effect
        //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
        someElement.data('timeoutIds', timeoutIds); 
    });

// Tool-Tip

  $(".more-info").mouseenter(function(){
      clearTimeout($(this).data('timeoutId'));
      $(this).find(".the-tooltip").fadeIn('150');
  }).mouseleave(function(){
      var someElement = $(this);
      var timeoutId = setTimeout(function(){
          someElement.find(".the-tooltip").fadeOut('150');
      }, 1200);
      //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
      someElement.data('timeoutId', timeoutId); 
  });

This might fit better at Code Review: http://codereview.stackexchange.com/ — calvinf, Sep 10 '12 at 18:06
@calvinf: Code Review SE is for working code only. It seems a debugging/helping question. — palacsint, Sep 10 '12 at 18:29

The Alpha · Answer 1 · 2012-09-12T15:45:07.907

1

Try this

$(function(){
    var timeoutIds=0;  
    $(".play").on('mouseenter', function(){
        $(this).next(".more-info").fadeIn(600);
    }).on('mouseleave', function(){
        var someElement = $(this);
        timeoutIds = setTimeout(function(){
            someElement.next(".more-info").fadeOut('150');
        }, 1200); 
    });

    $(".more-info").mouseenter(function(){
        clearTimeout(timeoutIds);
        $(this).find(".the-tooltip").fadeIn('150');
    }).mouseleave(function(){
        var someElement = $(this);
        timeoutId = setTimeout(function(){
            someElement.find(".the-tooltip").fadeOut('150');
        }, 300);
    });
});

DEMO (Due to the changes of source the demo is not working anymore.).

edited Sep 12 '12 at 15:45

answered Sep 10 '12 at 18:29

The Alpha

143,660
29
287
307

Hi Sheikh Heera, i did try the code but now they will not fadeOut anymore – Pullapooh Sep 10 '12 at 18:38
I would like that the ( i ) would fadeOut too. – Pullapooh Sep 10 '12 at 18:51
hi Sheikh Heera, your example did not work :/ but i have now changed my code and it almost works there is one little bug. [New code jsFiddle](http://jsfiddle.net/pullapooh/GJt8W/2/) | [Bug video example](http://www.screenr.com/tIJ8) | [Website](http://www.midnightlisteners.com/) – Pullapooh Sep 12 '12 at 13:35
@Pullapooh, it was working yesterday, may be you have changed something in the css. i've tested the demo last night and it was working. – The Alpha Sep 12 '12 at 15:26

Jquery mouse event

1 Answers1