當滾動到一個div和刪除類（1）改變類（2）離開div時給類（1）javascript？

Question

如何使JS當我達到或滾動到DIV ID hover1給類 「動畫fadeInDown」

當我向下滾動或離開DIV ID hover1變化類 「動畫fadeInDown」要類 「動畫fadeOutUp」

我使用animate.css該類

下面的例子（animate.css和j查詢已包括）：

body { 
 
    height: 9999px; 
 
} 
 

 
.kotak { 
 
    height: 500px; 
 
    background-color: red; 
 
    color: white; 
 
}

content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/> content 
 
<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/> 
 

 
<div id="hover1" class="kotak"><br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/><br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/><br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/><br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/><br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/><br/>&nbsp;<br/>&nbsp;<br/>&nbsp;<br/></div> 
 

 
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>

Codepen Link

Answer 1

試試這個在代碼筆的JS窗格。

$("#hover1").on("mouseover", function() { 
    $(this).removeClass('animated fadeOutUp').addClass('animated fadeInDown') 
}); 

$("#hover1").on("mouseout", function() { 
    $(this).removeClass('animated fadeInDown').addClass('animated fadeOutUp') 
});