fade out div when mouse is still

Question

hi guys! I've made a div show on mousemove. now I need it to fade out when mouse is not moving. I've tried this, but the problem is that when the div is in "fadeout-mood", it don't show again when I move the mouse.

is there someone who can help me with this?

$("#main_center").mousemove(function(){
 $("#menylist").show("");
 $("#menylist").fadeOut(5000);

the actual page is here: http://www.martinsorensson.com/porrmyr/index.php

Kindly Martin

Answer 1

Missing brackets, try this out:

$("#main_center").mousemove(function(){ $("#menylist").show("")}); 

$("#menylist").fadeOut(5000);

or you may try this:

$("#main_center").mousemove(function(){

 $(this).fadeOut(1000, function() {$(this).remove();});

});

Answer 2

$("#main_center").mousemove(function(){
    $("#menylist").stop().show().css('opacity',1).animate({
        opacity: 0
    }, 5000);
});

Answer 3

Hi Martin, I think for what you want to do, you must also stop the fading animation on mouse motion:

$('#main_center').mousemove( function(e) {
    $('#menylist').stop().show();
    $('#menylist').fadeOut(5000);
});

Note the stop() call. Is this what you were looking for?

Cheers, Tom

EDIT: David's solution is better than mine, because fadeOut() sets display to none, which probably is not what you want.

Answer 4

Hi guys! Thanks for your answers. As you see I'm quite new to jquery, so I'm really greatful for you kind help.

I think I'm gonna go for Davids solution, but I found that what I asked for was not exactly what I wanted. I realized I also need the div to be visible for some time before it starts to fade out.

Is it possible? /martin