Javascript 使用jQuery setTimeout更改多个元素上的类以设置时间量

当鼠标悬停在文字上时，我试图对文字产生模糊效果。我想让这些单词模糊一秒钟左右，然后按照它们在屏幕上停留的顺序回到标准单词

我几乎已经让它工作了，除了最后一个字在返回到初始状态时悬停。其他的词仍然模糊不清。有人有什么建议吗？请参阅我的JSFIDLE：

我试过的代码没有给我想要的结果：

var hoverTimeout;
$('span').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).addClass('hovered');
}, function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('hovered');
    }, 1000);
});

---

我对javascript还很陌生，所以我有点被卡住了

问题是因为您只使用了一个

setTimeout（）

引用。当您将鼠标悬停在下一个单词上时，上一个超时将被清除

要解决这个问题，您需要使用多个超时，每个字一个。您可以将它们放置在元素的

data（）

中，以保留对它们的引用：

（函数（计数）{
"严格使用",；
（功能包装（el）{
$（el）.filter（':not（script）'）.contents（）.each（function（））{
//节点。*在IE<9时不起作用，请使用'1'`
if（this.nodeType==Node.ELEMENT\u Node）{
包裹（这个）；
//和'3'
}else if（this.nodeType===Node.TEXT\u Node&！this.nodeValue.match（/^\s+$/）{
$（this）.replaceWith（$.map）（this.nodeValue.split（/（\S+）/），函数（w）{
返回w.match（/^\s*$/）？document.createTextNode（w）：$（“”{
id:count=count+1，
正文：w
}).get（）；
}));
}
});
}（“身体”）；
}(0));
$（'span'）。悬停（函数（）{
让$self=$（this.addClass（'hovered'）；
clearTimeout（$self.data（'timeout'））；
}，函数（）{
var$self=$（本）；
$self.data（'timeout'，setTimeout（函数（）{
$self.removeClass（'hovered'）；
}, 1000));
});
p{
字号：26px；
}
.盘旋{
过滤器：模糊（3px）；
}

你好，我叫罗斯，你好吗

相同：