How Can I Hover Multiple Elements In Order With Using Jquery?

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

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;
}

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

Solution 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);
    });
 });

Share