如何使用jquery按順序懸停多個元素？

Question

我希望在頁面加載時按順序將所有div懸停在.wrapper div下。 如何使用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')已被棄用，因為它導致了大量的最大堆棧超出錯誤。

在jQuery 1.8中不推薦使用，在1.9中刪除：名稱“hover”用作字符串“mouseenter mouseleave”的簡寫。 它為這兩個事件附加單個事件處理程序，並且處理程序必須檢查event.type以確定事件是mouseenter還是mouseleave。 不要將“hover”偽事件名稱與.hover（）方法混淆，后者接受一個或兩個函數。

試圖通過jQuery觸發懸停狀態是一個非常瀏覽器/ CPU密集的過程和很多重新呈現頁面，以確保您的調用是正確的。 因此，該功能已被刪除，但可以使用某些JS，但幾乎可以肯定會導致速度問題和/或堆棧問題，從而導致瀏覽器崩潰。

一個很好的選擇是使用如下的類：

 $(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

你需要設置timeOut間隔

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