There are several elements, when you hover over which of the children, the class should be added in turn after a period of time.

I could add a class when hovering, and when I take the mouse off the parent, the class is removed first, and then added for some reason, I don’t understand what it is.

$('.field_icon') .mouseover(function() { $(this).children('.field-item').each(function(i, el) { setTimeout(function() { $(el).addClass('active'); }, 100 + (i * 300)); }) }) .mouseleave(function() { $(this).children('.field-item').removeClass('active') }) 
 .field-item { display: inline-block; width: 50px; height: 50px; background: #7CB342; } .field-item.active { background: #FF9800; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div>

    2 answers 2

    This is how it will work (the first time I posted it, I did not notice one bug, now it works, it appears and disappears):

      <script> var timers = []; $('.field_icon') .mouseover(function() { ClearTimeOutTimer(); $(this).children('.field-item').each(function(i, el) { timers[i] = setTimeout(function() { $(el).addClass('active'); }, 100 + (i * 300)); }) }).mouseleave(function() { ClearTimeOutTimer(); $(this).children('.field-item').removeClass('active') }); function ClearTimeOutTimer(){ timers.map(function (timeOut) { if(timeOut) { clearTimeout(timeOut); } }); } </script>

      Note that if you move the mouse to the left, only those that are not filled before the mouseleave are filled. If down, then mouseover, apparently triggered again.

      Another moment, try to save timerId to each element and take mouseId from timerId when mouseleave and clearTimeout so that the rest timers do not continue to work after mouseleave