为什么动画一直重复自己，即使没有悬停在div上?

Question

我正在使用Javascript &jQuery和我一直在尝试做一个快速的网站展示给我的音乐老师。

当我把鼠标放在一个不可见的对象上时，动画偶尔会开始两次，或者永远重复，然后它会显示我想要显示的屏幕。当我将鼠标移开时，它只是将正常的动画移回0px，但随后不知为何，它又开始播放开始动画，然后是关闭动画，然后是开始动画，以此类推。

这是我的代码片段。如果你还需要的话就告诉我。

$(document).ready(function() {
$("#song1").hover(function() {
$(this).css({
'width': '0px',
'height': '0px'
})
$(this).animate({
width: '560px',
height: '315px',
opacity: '100'
})
}, function() {
$(this).animate({
width: '0px',
height: '0px',
opacity: '0'
})
$(this).css({
'width': '560px',
'height': '315px'
})
})
})

body {
background-color: grey
}
p {
color: white
}
#song1 {
background-color: white;
opacity: 0;
width: 560px;
height: 315px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p id="song1tx">1.</p>
<div id="song1">
<p id="song1load" style="color: black">Loading...</p>
</div>

Answer 1

尝试只在该元素处于动画状态时选择该元素:

$(document).ready(function() {
$("#song1:not(:animated)").hover(function() {
$(this).css({
'width': '0px',
'height': '0px'
});

$(this).animate({
width: '560px',
height: '315px',
opacity: '100'
});
});
$("#song1").mouseout(function() {
$(this).animate({
width: '0px',
height: '0px',
opacity: '0'
})

$(this).css({
'width': '560px',
'height': '315px'
})
});
});