鼠标悬停时的jQuery暂停延迟计时器 [英] jQuery pause delay timer on mouseover

问题描述

我目前正在学习MVC3，并在我的学习过程中添加了几个jQuery脚本到我的项目，试图在同一时间学习。事情进展顺利，但在这种情况下，我似乎无法确定我要做什么来实现我想要的功能。

我创建了一个这个小提琴中的相关代码示例，而不是在几个代码块中写出代码。 / p>

在我的代码中会发生什么，当按下按钮时，消息div从左边滑出，3秒后它会再次滑动。如果用户在滑出消息时将鼠标放在消息div上，则会添加一条消息。

这是我想要的，除了一个小的加法;当用户将鼠标放在消息div上时，我希望它保持打开，直到它们移动鼠标，然后它将滑回，目前它在3秒后仍然会滑动。

我尝试移动 .delay ，将代码添加到 mouseout（）事件，但是我缺乏jQuery的知识已经阻碍了我的进步。

任何人都可以解释如何做到这一点和/或指向我的一些例子。

非常感谢。

解决方案

秒延迟）在显示功能，然后我建议以下mouseover / mouseout处理程序：

  $（＃messageWrapper）。mouseover （function（）{
 $（＃testlabel）。text（mouseover）; 
 $（＃messageWrapper）。css（'width'，'auto'）; 
 $（＃messageWrapper .messageBox）。text（something）; 
 $（this）.clearQueue（）; 
}）mouseout（function（）{
 $（ testlabel）。text（mouseout）; 
 clearMessages（）; 
}）; 
  

编辑小提琴： http://jsfiddle.net/vypTA/7/ - 猜测你可以调整明确的延迟（将其作为arg或某事传递）

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.

解决方案

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)

这篇关于鼠标悬停时的jQuery暂停延迟计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！