Question

First things first, i find this one a little difficult to explain, as english is not my native language. So excuse the mess.

I wrote a little notification function, which is triggered on form submit. Normal behaviour is:

• User submits form
• Note fades in
• 2 second delay
• Note fades out

When the note is hovered, it expands by css-transition. Logically, it should not fade out until the user collapses it by mouseleave.
And here lies my problem: How do i prevent the fadeOut Statement from being executed, as long as the div is hovered?

I tried something like

if ($('#notification').hover()){
    return ;
}

but of course, the first statement is already excuted as shown here:

http://jsfiddle.net/6DsJb/

I also tried a few other things, like a seperate script which is listening on the hover event, then calling $('#notification').show() ;

Neither works. I know this is a simple error in reasoning, but hell, i am stuck.

Thanks in advance.

Answer 1

After the fadeIn call setTimeout, with a function that:

• If the notifications is collapsed, hide it.
• Else, use .mouseleave to hide it once it looses mouse focus.

ie:

$('#notification').fadeIn(500);

setTimeout(function() {
  if (notification_is_collapsed)
    $('#notification').fadeOut(500);
  else
    $('#notification').mouseleave(function() {
      $('#notification').fadeOut(500);
    });
}, 2000);