Question

I am currently learning MVC3 and have been adding several jQuery scripts to my projects during my learning process, trying to learn that at the same time. Things have been going well, but in this case I can’t seem to figure out exactly what I have to do to achieve the functionality I want.

I have created a sample of the relevant code in this Fiddle, rather than write the code out here in several code blocks.

What happens in my code is that when the button is pressed, the message div is slide out from the left, after 3 seconds it will slide away again. If the user puts their mouse over the message div while it is slid out, a message will be added.

This is pretty much what I want apart from one small addition; when the user puts their mouse over the message div, I want it to stay open until they move the mouse away, then it will slide back, currently it will still slide away after the 3 seconds have been elapsed.

I have tried moving .delay, adding code into the mouseout() event, but my lack of knowledge in jQuery has pretty much stopped my progression here.

Could anyone explain how to do this and/or point me to some examples.

Thanks very much.

Answer 1

Since you call the clear (and thus 3 sec delay) in display function, then I suggest the following mouseover/mouseout handlers:

$("#messageWrapper").mouseover(function() {
    $("#testlabel").text("mouseover");
    $("#messageWrapper").css('width', 'auto');
    $("#messageWrapper .messageBox").text(something);
    $(this).clearQueue();
}).mouseout(function() {
    $("#testlabel").text("mouseout");
    clearMessages();
});

Edited Fiddle: http://jsfiddle.net/vypTA/7/ – guess you could tweak the clear delay (pass it as arg or something)