jQuery悬停与setTimeout（与hoverIntent相反）

我有一组图像，每个我想翻转和闪烁到不同的图像半秒左右，然后恢复到原始图像，即使鼠标仍然在图像（即没有鼠标）jQuery悬停与setTimeout（与hoverIntent相反）

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

有页面的一个例子....我只是想上出现翻转图像出现然后再次迅速消失。

我已经搜遍了网页的例子，找不到任何东西......任何帮助将不胜感激。

感谢，安德鲁

编辑：

这是我目前使用悬停图片代码

$(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); 
    }); 
});

}）;

来源

2010-05-11 Andrew Cassidy

我理解的对不对？鼠标进入图像，图像改变几秒钟，并再次回到前一张图像。当鼠标移出图像时没有任何反应？ – meo 2010-05-11 17:44:35

是的，就是这样。 – 2010-05-11 18:17:23

使用setTimeout很容易。它将函数作为第一个参数 - 就像许多jQuery方法 - 以秒为单位的时间。

我从你的代码开始并重构了一下。最初，如果在定时器启动之前，用户将鼠标悬停在图像上方，远离并返回图像，则可能会出现竞态条件。现在，切换到备用图像并返回到原始图像的逻辑是分开的。如果图像已被换出，则鼠标悬停处理程序也会短路。我还缓存了由$(this)返回的jQuery对象，稍微提高了速度（缓存jQuery对象是很好的做法）。

我改变了hover属性data-hover（HTML5规范，您可以使用自定义属性，但要求他们开始与data-），并检查其在鼠标悬停选择presense。

最后，我删除了额外的ready包装（$(document).ready(function(){…})和$(function(){…}是一样的，不需要两者都有）。

$(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); 
    }); 
});

该代码尚未经过测试。

来源

2010-05-11 17:58:48 s4y

非常感谢你Sidnicious。这很好，你非常有帮助，谢谢。 – 2010-05-11 18:23:38

在这里你可以找到一些明显的例子：

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

但我个人建议你使用定时器插件，它是更友好的使用： http://jquery.offput.ca/every/

来源

2010-05-11 16:36:56 mamoo

喜欢的东西

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

来源

2010-05-11 16:43:34 scaryzet

感谢Scaryzet，我很初学者...这是我目前使用 http://thepool.ie/rollover.js 如果你能告诉我在哪里添加你的代码的代码这表明它会很棒。非常感谢。 Andrew – 2010-05-11 17:16:50

嗨，代码现在工作，非常感谢您的帮助。 – 2010-05-11 18:24:09

有更好的办法是setTimeout的

可以使用$('.rollover').mouseenter(function() {代替$('.rollover').hover(function() {http://api.jquery.com/mouseenter/

来源

2012-11-19 07:09:41

jQuery悬停与setTimeout（与hoverIntent相反）

回答

相关问题