javascript在滚动到div时给class（1）并在离开div时删除class（1）更改为class（2）？

Question

当我到达或滚动到 div id hover1 时如何制作js给类“动画fadeInDown”

当我向下滚动或离开 div id hover1 更改类“动画fadeInDown”到 class“动画fadeOutUp”

我正在使用animate.css作为课程

这里的示例（animate.css和jquery已经包含）：

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