jQuery悬停与setTimeout（与hoverIntent相反）

Question

我有一组图像，对于每个图像，我想翻转并闪烁到不同的图像半秒左右，然后恢复到原始图像，即使鼠标仍然位于图像上（即没有鼠标悬停） ）

建议使用 setTimeout 但我不知道如何正确使用它。

http://thepool.ie/rollover/

有一个页面示例....我就像鼠标悬停时出现的图像一样，快速出现然后又消失。

我在网上搜索了示例，但找不到任何内容...任何帮助将不胜感激。

谢谢， 安德鲁

编辑：

这是我目前用于悬停图像的代码

$(document).ready(function(){   
$(function() {
    $('.rollover').hover(function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    }, function() {
        var currentImg = $(this).attr('src');
        $(this).attr('src', $(this).attr('hover'));
        $(this).attr('hover', currentImg);
    });
});

});

Answer 1

使用 setTimeout 很简单。它以函数作为第一个参数——就像许多 jQuery 方法一样——以毫秒为单位的时间作为第二个参数。

我从你的代码开始并对其进行了一些重构。最初，如果用户在计时器触发之前将鼠标悬停在图像上、离开然后返回到图像上，则可能会出现竞争条件。现在，切换到备用图像和返回原始图像的逻辑是分开的。如果图像已经被换出，鼠标悬停处理程序也会短路。我还缓存了 $(this) 返回的 jQuery 对象，以稍微提高速度（缓存 jQuery 对象是一个很好的做法）。

我将 hover 属性更改为 data-hover （HTML5 规范允许您使用自定义属性，但要求它们以 data- 开头）并检查因为它出现在鼠标悬停选择器中。

最后，我删除了额外的 ready 包装器 ($(document).ready(function(){…}) 和 $(function(){…}< /code> 是相同的，不需要两者都有）

$(function() {
    $('.rollover[data-hover]').mouseover(function() {
        var $this = $(this), originalImage = $this.attr('src');
        if ($this.data('imagesSwapped')) {
            return;
        }
        $this.attr('src', $this.attr('data-hover')).data('imagesSwapped', true);
        setTimeout(function(){
            $this.attr('src', originalImage).removeData('imagesSwapped');
        }, 500);
    });
});

代码尚未测试。

Answer 2

在这里您可以找到一些清晰的示例：

http://www.electrictoolbox.com/using-settimeout -javascript/

但我个人建议你使用Timers插件，使用起来更加友好：
http://jquery.offput.ca/every/

Answer 3

像这样的东西

$('#myid').hover(function() {
    $(this).addClass('hovered');
    setTimeout(function() { $('#myid').removeClass('hovered'); }, 100);
});

Answer 4

setTimeOut 有更好的方法，

您可以使用 $('.rollover').mouseenter(function() { 而不是 $('.rollover').hover(function() {< /code> http://api.jquery.com/mouseenter/