2

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

建议使用 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);
    });
});

});

4

4 回答 4

7

使用setTimeout很容易。它将一个函数作为第一个参数——就像许多 jQuery 方法一样——第二个参数是毫秒。

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

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

最后，我删除了额外的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-11T17:58:48.330 回答
0

在这里你可以找到一些清晰的例子：

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

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

于 2010-05-11T16:36:56.993 回答
0

就像是

$('#myid').hover(function() {
    $(this).addClass('hovered');
    setTimeout(function() { $('#myid').removeClass('hovered'); }, 100);
});
于 2010-05-11T16:43:34.750 回答
0

有更好的方法 setTimeOut

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

于 2012-11-19T07:09:41.517 回答