use jQuery setTimeout to change classes for set amount of time on multiple elements

user_15091226 0
Viewed 49

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!

jquery javascript
1 Answers

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>

user_5194130
Related