javascript 给出 class (1) 当滚动到 div 并删除 class (1) 更改为 class (2) 当离开 [=13] =]？

Question

当我到达或滚动到 div id hover1 时如何制作 js class "animated fadeInDown"

当我向下滚动或离开时 div id hover1 更改 class"animated fadeInDown" 到class"animated fadeOutUp"

我正在使用 animate.css 作为 class

此处示例（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')
});

javascript 给出 class (1) 当滚动到 div 并删除 class (1) 更改为 class (2) 当离开 [=13] =]？

javascript to give class (1) when scroll to a div and remove class (1) change to class (2) when leave the div?

html

javascript

css

jquery

animate.css