Javascript 设置并清除间隔滑块jQuery

我试着制作一个简单的双图像滑块，可以自动上下滑动。当用户将鼠标悬停在它上面时，它应该停止，如果他/她将鼠标悬停在它外面，它将继续正常工作。我试着使用set和clearInterval，但滑块在悬停时没有暂停。我应该如何编写代码使其工作

var $Slides = $("#EServices"); //Or var $Slides = $("#Serv-Slides");
var interval;
function StartSlider() {
interval = setInterval(function () {
        $("#Serv-Slides").animate({ "marginTop": "0px" }, 200).delay(2000);
        $("#Serv-Slides").animate({ "marginTop": "-150px" }, 200).delay(2000);
    });
}

function StopSlider() {
    clearInterval(interval);
}

$Slides.on('mouseenter', StopSlider).on('mouseleave', StartSlider);
StartSlider();

---

这里有两个主要问题：

clearInterval

不会停止

jquery

的动画，它只会停止

setInterval

调用，以便不再在队列中添加动画。您已通过管道传输且仍挂起的每个动画仍将运行。当它们全部完成时，它将停止

您没有为

设置间隔提供任何给定时间。因此，所提供的函数将以浏览器所能达到的速度被重复调用。这是一个可怕的错误，因为您将在队列中遇到大量挂起的动画。新动画的播放速度比实际使用速度快得多

这应该起作用：

var区间；
函数startSlider（）{
函数animate（）{
$（“#服务幻灯片”）。动画（{“marginTop”：“0px”}，200）。延迟（2000）
.animate（{“marginTop”：“-150px”}，200）；//.delay（2000）；
//最后一个延迟是无用的，它由setInterval管理。
}
//立即开始第一个动画。
制作动画（）；
//设置与动画和延迟持续时间匹配的间隔。
间隔=设置间隔（动画，200+2000+200+2000）；
}
函数stopSlider（）{
//避免添加任何进一步的动画。
间隔时间；
//停止当前正在运行的动画。
$（“#服务幻灯片”）.stop（true）；
}
$（“#幻灯片”）。on（'mouseenter'，stopSlider）。on（'mouseleave'，startSlider）；
startSlider（）
#幻灯片{
背景颜色：黄色；
填充顶部：150px；
高度：20px；
}
#服务幻灯片{
背景色：红色；
高度：20px；
}

什么是
$Slides
？控制台中有错误吗？显示所有相关codevar$幻灯片=$（“#电子服务”）；间隔的超时时间在哪里？