views:

34

answers:

1

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);
});
+1  A: 

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");
HurnsMobile
That's the opposite of what I want though. =/ I want the fade out to occur immediately, but the fadeIn to occur 1 second later. Right now they both occur 1 second later.
Razor Storm
Ahhh ok! Try this then `.fadeOut('slow').delay(1000).fadeIn('slow');` API Docs on delay - http://jqapi.com/#p=delay
HurnsMobile
haha that works! I'm still curious as to why the previous solution doesn't work.
Razor Storm