jQuery延迟代码悬停？（最简单的方法）_Jquery_Hover

jQuery延迟代码悬停？（最简单的方法）

jquery

jQuery延迟代码悬停？（最简单的方法）,jquery,hover,Jquery,Hover,所以我知道这是一个被问了很多的问题，但我希望现在可以用jQuery更简单地实现这一点。我想做的就是有一个div，显示来自用户的新帖子，一次一篇。Socket IO会将新数据推送到一个列表中，一次只隐藏一个数据。每隔x秒会有一段时间更改显示的数据。我想做的是，当用户将鼠标悬停在它上面时，暂停时间间隔，当他们将鼠标移出时，恢复到它停止的位置 <ul> <li class="current">List #1</li> <li>List #2</

所以我知道这是一个被问了很多的问题，但我希望现在可以用jQuery更简单地实现这一点。我想做的就是有一个div，显示来自用户的新帖子，一次一篇。Socket IO会将新数据推送到一个列表中，一次只隐藏一个数据。每隔x秒会有一段时间更改显示的数据。我想做的是，当用户将鼠标悬停在它上面时，暂停时间间隔，当他们将鼠标移出时，恢复到它停止的位置

<ul> 
<li class="current">List #1</li>
<li>List #2</li>
</ul>


列表#1
清单#2

您可以使用setInterval每X毫秒更改一次图像，然后使用clearInterval停止

var interval = setInterval(<function>, <delay>);

您可以使用setInterval每X毫秒更改一次图像，然后使用clearInterval停止

var interval = setInterval(<function>, <delay>);

您不会显示已有的代码，但以下是一种相当通用的方法：

var pause = false;

setInterval(function() {
   if (pause)
      return;

   // your code to change the item here

}, delay);

$("selector for your element here").hover(
   function() {
      pause = true;
   },
   function() {
      pause = false;
   }
);

（可能应该在文档中准备好上述所有内容。）

工作演示：

您没有显示您已有的代码，但以下是一种相当通用的方法：

var pause = false;

setInterval(function() {
   if (pause)
      return;

   // your code to change the item here

}, delay);

$("selector for your element here").hover(
   function() {
      pause = true;
   },
   function() {
      pause = false;
   }
);

（可能应该在文档中准备好上述所有内容。）

工作演示：

我想做的是当用户将鼠标悬停在它上面时，暂停时间间隔，当他们将鼠标移出时，恢复到它停止的位置

如果你希望它暂停间隔并在间隔中间恢复（比如说是一个大的间隔，可能是第二个或更多），那么你可以使用

我想做的就是有一个div，显示来自用户的新帖子，一次一篇

使用另一个问题中的代码，这里有一些代码可以触发列表上的链，在每个项目上设置

current

，并将其淡入，直到所有项目都显示出来：

var currentTimer;
var timeBetween = 500;

function hideCurrentAndSetUpNext()
{
    var current = $('ul li.current:last');
    current.fadeIn();

    var next = current.next();
    if(next != null)
    {
        next.addClass('current');
        currentTimer = new Timer(hideCurrentAndSetUpNext, timeBetween);
    }
}

currentTimer = new Timer(hideCurrentAndSetUpNext, timeBetween);

$('ul li').hover(
    function() {
        currentTimer.pause();
    },
    function() {
        currentTimer.resume();
    }
);

下面是一把小提琴，演示此代码：