Question

I have this code:

clearTimeout(tooltiptimeout);
tooltiptimeout="";

$("#tool").fadeOut("slow").queue(function(){
    tooltiptimeout=setTimeout(function(){
        $("#tool").css("left",item.pageX-33);
        $("#tool").css( "top",item.pageY-95);
        $("#tool").fadeIn("slow");
    }, 1000);
    $(this).dequeue();
});

What it should do is this: As the user hovers his/her mouse over an object, a tooltip will show up there. Then when the user moves the mouse away, the tooltip should immediately start fading out. Later when the user rests his/her mouse on another object, a timeout of 1 second is called before the tooltip shows up at the new location.

The problem is, right now the fadeout does not get called immediately, and instead only occurs when the setTimeout occurs. (ie instead of first fading out then showing up a while later. Right now the tooltip stays in place, then a while later, it fades out and then fades in at new location).

What gives?

BTW, this code has the same problem:

    $("#tool").fadeOut("slow",function(){
    tooltiptimeout=setTimeout(function(){
        $("#tool").css("left",item.pageX-33);
        $("#tool").css( "top",item.pageY-95);
        $("#tool").fadeIn("slow");
    }, 1000);
});

Answer 1

Edit: Changed the answer based on updated comment below.

Try the following:

$("#tool").fadeOut("slow").delay('1000')
    .css("left",item.pageX-33)
    .css( "top",item.pageY-95)
    .fadeIn("slow");