There are some elements with child elements, when you hover, child elements should be added to the class after interval.
I can add the class was able to hover, and when I take away the mouse from the parent class is removed first, and then again for some reason added, I do not understand what was going on.
$('.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>