Есть функция makeItRain, которая создаёт эффект дождя на странице при её вызове. Есть две кнопки в виде ссылок, на которые при наведении должна вызываться функция makeItRain, а при отведении заканчивается. При наведении никаких проблем не возникло, но makeItRain после отведения мыши от кнопок не останавливается. Для этих целей я использовал mouseover и mouseout, также пробовал использовать setInterval.
let makeItRain = function () {
$(".rain").empty();
let increment = 0;
let drops = "";
let backDrops = "";
while (increment < 100) {
let randoHundo = Math.floor(Math.random() * (98 - 1 + 1) + 1);
let randoFiver = Math.floor(Math.random() * (5 - 2 + 1) + 2);
increment += randoFiver;
drops +=
'<div class="drop" style="left: ' +
increment +
"%; bottom: " +
(randoFiver + randoFiver - 1 + 100) +
"%; animation-delay: 0." +
randoHundo +
"s; animation-duration: 0.5" +
randoHundo +
's;"><div class="stem" style="animation-delay: 0.' +
randoHundo +
"s; animation-duration: 0.5" +
randoHundo +
's;"></div><div class="splat" style="animation-delay: 0.' +
randoHundo +
"s; animation-duration: 0.5" +
randoHundo +
's;"></div></div>';
backDrops +=
'<div class="drop" style="right: ' +
increment +
"%; bottom: " +
(randoFiver + randoFiver - 1 + 100) +
"%; animation-delay: 0." +
randoHundo +
"s; animation-duration: 0.5" +
randoHundo +
's;"><div class="stem" style="animation-delay: 0.' +
randoHundo +
"s; animation-duration: 0.5" +
randoHundo +
's;"></div><div class="splat" style="animation-delay: 0.' +
randoHundo +
"s; animation-duration: 0.5" +
randoHundo +
's;"></div></div>';
}
$(".rain.front-row").append(drops);
$(".rain.back-row").append(backDrops);
};
document.addEventListener("mouseover", startInterval);
document.addEventListener("mouseout", stopInterval);
let timer = null;
function startInterval() {
timer = setInterval(document.addEventListener("mouseover", (event) => {
if (event.target.tagName.toLowerCase() === 'a' ||
event.target.tagName.toLowerCase() === 'p') {
makeItRain();
}
}, 1000));
}
function stopInterval() {
document.addEventListener("mouseout", (event) => {
if (event.target.tagName.toLowerCase() === 'a' ||
event.target.tagName.toLowerCase() === 'p' ) {
/* Здесь я пытался разными способами остановить функцию makeItRain */
}
});
}
<body class="back-row-toggle splat-toggle">
<div class="rain front-row"></div>
<div class="rain back-row"></div>
<div class="toggles">
</div>
<div class="container">
<header>
<h1>BEST</h1>
</header>
<div class="btns">
<a id="first" href="">
<span></span>
<span></span>
<span></span>
<span></span>
<p>Some<br>Thing</p>
</a>
<a id="second" href="">
<span></span>
<span></span>
<span></span>
<span></span>
<p>Some</p>
</a>
</div>
</div>
<script src="west.js"></script>
</body>