How can I hover multiple elements in order with using jquery?

Question

I want to hover all div under .wrapper div in order with a delay when the page is loaded. How can I do this with using jquery?

HTML

<div class="wrapper">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
</div>

Jquery

$('.wrapper').children().each(function(){
   $(this).trigger('hover'); 
});

https://jsfiddle.net/drxvr1hn/

Answer 1

.trigger('hover') has been deprecated as it caused a great deal of maximum stack exceeded errors.

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

Trying to trigger the hover state via jQuery is a very browser/cpu intensive process and a lot of re-rendering of a page to ensure that your call is correct. Therefore the ability was removed but is possible with some JS but will almost certainly cause speed issues and/or stack issues which can cause browser crashes.

A good alternative would be to use classes like below:

 $(document).ready(function() { $('.wrapper div').on('mouseover', function() { $('.wrapper div').addClass('hover'); }).on('mouseleave', function() { $('.wrapper div').removeClass('hover'); }); }); 

 .wrapper > div { width: 100%; height: 20px; margin-bottom: 20px; } .first { background-color: #468966; } .second { background-color: #FFF0A5; } .third { background-color: #FFB03B; } .first.hover { background-color: #B64926; } .second.hover { background-color: #8E2800; } .third.hover { background-color: #464A66; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="first"></div> <div class="second"></div> <div class="third"></div> </div> 

Answer 2

you need to set the timeOut interval

$(window).scroll(function() {      
$('. wrapper'). children().each(function(index){
          var _this = this;
          setTimeout( function(){ $(_this).trigger('hover'); }, 200*index);
    });
 });