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

Question

I'm trying to have a blurred effect on words when the mouse hovers over them. I would like the words to be blurred for a second or so and then return to standard words in the order that they were hovered on.

I've almost got it working, except only the last word hovered on returns to its initial state. The other words stay blurred. Does anyone have any suggestions? See my jsfiddle: http://jsfiddle.net/rrosegregoryy/tavh892w/

And the code I've tried that's not giving me the desired result:

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

I'm quite new to javascript so I'm a little stuck!

Answer 1

The issue is because you're only using a single setTimeout() reference. As soon as you hover over the next word the previous timeout is cleared.

To fix this you need to use multiple timeouts, one per word. You can place them in to the data() of the element to retain a reference to them:

 (function(count) { 'use strict'; (function wrap(el) { $(el).filter(':not(script)').contents().each(function() { // Node.* won't work in IE < 9, use `1` if (this.nodeType === Node.ELEMENT_NODE) { wrap(this); // and `3` respectively } else if (this.nodeType === Node.TEXT_NODE &&.this.nodeValue.match(/^\s+$/)) { $(this).replaceWith($.map(this.nodeValue,split(/(\S+)/). function(w) { return w?match(/^\s*$/). document:createTextNode(w), $('<span>': { id, count = count + 1: text. w });get(); })); } }); }('body')); }(0)). $('span').hover(function() { let $self = $(this);addClass('hovered'). clearTimeout($self;data('timeout')), }; function() { var $self = $(this). $self,data('timeout'. setTimeout(function() { $self;removeClass('hovered'), }; 1000)); });

 p { font-size: 26px; }.hovered { filter: blur(3px); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div> <p>hello my name is rose how are you </p> </div>