Javascript 当用户不再悬停时，如何使这个无限jquery动画结束？

当您将鼠标悬停在“我的菜单”中的三个项目上时，有一个浅蓝色的点开始闪烁红色。我希望当用户不再将鼠标悬停在FormsItem1、FormsItem2或FormsItem3 divs上时，动画停止。我试着使用mouseover和mouseout函数，但在我停止悬停后，颜色变化的动画似乎只是随意地继续。如何将颜色更改动画限制在用户悬停时

以下是我的Jquery代码：

<script>

$(document).ready(function(){

    $(".dotIcon").animate({'opacity': '1'}, 1000);

 $('#FormsItem1').mouseover(function(){
    initList = setInterval(function dotColorChange(){
        $("#dotIcon1").animate({'background-color': 'white'}); 
        $("#dotIcon1").animate({'background-color': 'red'})
    },100); 
 }).mouseout(function(){
    clearInterval(initList);
        $("#dotIcon1").animate({'background-color': 'white'})
 });

 $('#FormsItem2').mouseover(function(){
    initList = setInterval(function dotColorChange(){
        $("#dotIcon2").animate({'background-color': 'white'}); 
        $("#dotIcon2").animate({'background-color': 'red'})
    },100); 
 }).mouseout(function(){
    clearInterval(initList);
        $("#dotIcon2").animate({'background-color': 'white'})
 });


 $('#FormsItem3').mouseover(function(){
    initList = setInterval(function dotColorChange(){
        $("#dotIcon3").animate({'background-color': 'white'}); 
        $("#dotIcon3").animate({'background-color': 'red'})
    },100); 
 }).mouseout(function(){
    clearInterval(initList);
        $("#dotIcon3").animate({'background-color': 'white'})
 });


    $("#FormsItem1").hover(function(){
        $(".FormPreviewPane").css("background-color", "white");
        $(".PreviewContainer").animate({'top': '195px'},100);
        $("#PreviewLine").animate({'top': '77px'},200);
        }, function(){
    });


    $("#FormsItem2").hover(function(){
        $(".FormPreviewPane").css("background-color", "beige");
        $("#PreviewLine").animate({'top': '157px'},200);
        }, function(){
    });

    $("#FormsItem3").hover(function(){
        $(".FormPreviewPane").css("background-color", "lightgray");
        $("#PreviewLine").animate({'top': '237px'},200);
        }, function(){
    });

});


</script>

$（文档）.ready（函数（）{
$（“.dotIcon”）.animate（{'opacity'：'1'}，1000）；
$（'#FormsItem1'）.mouseover（函数（）{
initList=setInterval（函数dotColorChange（）{
$（“#dotIcon1”）。动画（{'background-color'：'white'}）；
$（“#dotIcon1”）。动画（{'background-color'：'red'}）
},100); 
}).mouseout（函数（）{
clearInterval（initList）；
$（“#dotIcon1”）。动画（{'background-color'：'white'}）
});
$（'#FormsItem2'）。鼠标悬停（函数（）{
initList=setInterval（函数dotColorChange（）{
$（“#dotIcon2”）。动画（{'background-color'：'white'}）；
$（“#dotIcon2”）。动画（{'background-color'：'red'}）
},100); 
}).mouseout（函数（）{
clearInterval（initList）；
$（“#dotIcon2”）。动画（{'background-color'：'white'}）
});
$（'#FormsItem3'）.mouseover（函数（）{
initList=setInterval（函数dotColorChange（）{
$（“#dotIcon3”）。动画（{'background-color'：'white'}）；
$（“#dotIcon3”）。动画（{'background-color'：'red'}）
},100); 
}).mouseout（函数（）{
clearInterval（initList）；
$（“#dotIcon3”）。动画（{'background-color'：'white'}）
});
$（“#FormsItem1”）.hover（函数（）{
$（“.FormPreviewPane”）.css（“背景色”、“白色”）；
$（“.PreviewContainer”）.animate（{'top'：'195px'}，100）；
$（“#预览行”）.animate（{'top'：'77px'}，200）；
}，函数（）{
});
$（“#FormsItem2”）。悬停（函数（）{
$（.FormPreviewPane”）.css（“背景色”、“米色”）；
$（“#预览线”）.animate（{'top'：'157px'}，200）；
}，函数（）{
});
$（“#FormsItem3”）。悬停（函数（）{
$（“.FormPreviewPane”）.css（“背景色”、“浅灰色”）；
$（“#预览行”）.animate（{'top'：'237px'}，200）；
}，函数（）{
});
});

这是我的CSS：

<style>


.opaqueBlock{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity:0.6;
    margin-left: 60px; 
    width: 360px; 
    height: 46px; 
    background-color: #486173;
    border-radius: 10px;
}

.opaqueBlock:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
    opacity:0.8;
}

.formLinkContainer{ 
    position: absolute;
}

.formTextSpan:hover + .opaqueBlock{ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80) !important";
    opacity: 0.8 !important;
}

.formTextSpan{
    position: absolute; 
    z-index: 1; margin-left: 73px; 
    color: white; 
    margin-top: 7px; 
    font-family: 'Didact Gothic' !important; 
    font-size: 23px !important;
}

.dotIcon{
    height: 30px;
    width: 30px;
    background-color: #D6EDFF; /*#E8F5FF*/
    position: absolute; 
    margin-left:13px;
    margin-top: 7px;
    border-radius: 15px;
    opacity: 0;
    box-shadow: 0 0 10px 1px white;
}

.dotLine{
    position: absolute;
    left: 43px;
    top: 22px;
    stroke: white;
}


img{border: none;}

.FormPreviewPane {
    position: absolute; 
    border: 1px dotted blue; 
    width: 340px; 
    height: 345px; 
    box-shadow: 0px 0px 33px 5px #848C9C; 
    z-index:1; 
    background-image: url('');
    border-radius:50px;
    opacity: 0.8;
}

.FormPreviewPane.stuck {
    position:fixed;
    top:0;
}

.FormPreviewPaneBackground{
    position: absolute; 
    width: 337px; 
    height: 435px; 
    z-index: 0;     
    opacity:0.15;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}

.PreviewContainer{
    position: absolute; 
    top: 195px; 
    left: 550px; 
    width: 430px;
}

#PreviewLine{
    stroke: #D6EDFF;
    stroke-width:7;
    transform: rotate(0deg); 
    opacity: 1.0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    position: absolute; 
    left: -129px; top: 77px;
}

#FormsItem1{top: 250px;}
#FormsItem2{top: 330px;}
#FormsItem3{top: 410px;}


</style>

.乳白色块{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；
不透明度：0.6；
左边距：60像素；
宽度：360px；
高度：46px；
背景色：#486173；
边界半径：10px；
}
.opaqueBlock:悬停{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=80）”；
不透明度：0.8；
}
.formLinkContainer{
位置：绝对位置；
}
.formTextSpan:hover+.opaqueBlock{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=80）！重要”；
不透明度：0.8！重要；
}
.formTextSpan{
位置：绝对位置；
z指数：1；左边距：73px；
颜色：白色；
边缘顶部：7px；
字体系列：“Didact哥特式”！重要；
字体大小：23px！重要；
}
.dotIcon{
高度：30px；
宽度：30px；
背景色：#D6EDFF；/*#E8F5FF*/
位置：绝对位置；
左边距：13px；
边缘顶部：7px；
边界半径：15px；
不透明度：0；
盒影：0 0 10px 1px白色；
}
dotLine先生{
位置：绝对位置；
左：43像素；
顶部：22px；
笔画：白色；
}
img{边框：无；}
.FormwPane{
位置：绝对位置；
边框：1px点蓝色；
宽度：340px；
高度：345px；
盒影：0px 0px 33px 5px#848C9C；
z指数：1；
背景图像：url（“”）；
边界半径：50px；
不透明度：0.8；
}
.FormPreviewPane.卡住了{
位置：固定；
排名：0；
}
.FormPreviewPaneBackground{
位置：绝对位置；
宽度：337px；
高度：435px；
z指数：0；
不透明度：0.15；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=15）”；
}
.PreviewContainer{
位置：绝对位置；
顶部：195px；
左：550px；
宽度：430px；
}
#预览线{
冲程：#D6EDFF；
笔画宽度：7；
变换：旋转（0度）；
不透明度：1.0；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=80）”；
位置：绝对位置；
左：-129px；顶：77px；
}
#FormsItem1{top:250px；}
#FormsItem2{top:330px；}
#FormsItem3{top:410px；}

这是我的HTML：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator -->







<div id="WoodenBackgroundContainer" style="background-color: navy; height: 800px;">



<a id="PreviewContainerLink" href="" target="_blank">
    <div class="PreviewContainer">
        <svg id="PreviewLine" height="5" width="131"><line x1="0" y1="0" x2="131" y2="0"/></svg>
        <div class="FormPreviewPane"></div>
        <div class="FormPreviewPaneBackground"></div>
    </div>
</a>


<a href="#" target="_blank">
<div id="FormsItem1" class="formLinkContainer">
<div class="dotIcon" id="dotIcon1"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Internal Communication</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="#" target="_blank">
<div id="FormsItem2" class="formLinkContainer">
<div class="dotIcon" id="dotIcon2"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Reports Package</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="#" target="_blank">
<div id="FormsItem3" class="formLinkContainer">
<div class="dotIcon" id="dotIcon3"></div>
<svg class="dotLine" height="5" width="17"><line x1="0" y1="0" x2="131" y2="0"/></svg>
<span class="formTextSpan">Talking Points</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>



</div>
</div>

.乳白色块{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；
不透明度：0.6；
左边距：60像素；
宽度：360px；
高度：46px；
背景色：#486173；
边界半径：10px；
}
.opaqueBlock:悬停{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=80）”；
不透明度：0.8；
}
.formLinkContainer{
位置：绝对位置；
}
.formTextSpan:hover+.opaqueBlock{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=80）！重要”；
不透明度：0.8！重要；
}
.formTextSpan{
位置：绝对位置；
z指数：1；左边距：73px；
颜色：白色；
边缘顶部：7px；
字体系列：“Didact哥特式”！重要；
字体大小：23px！重要；
}
.dotIcon{
高度：30px；
宽度：30px；
背景色：#D6EDFF；/*#E8F5FF*/
位置：绝对位置；
左边距：13px；
边缘顶部：7px；
边界半径：15px；
不透明度：0；
盒影：0 0 10px 1px白色；
}
dotLine先生{
位置：绝对位置；
左：43像素；
顶部：22px；
笔画：白色；
}
img{边框：无；}
.FormwPane{
位置：绝对位置；
边框：1px点蓝色；
宽度：340px；
高度：345px；
盒影：0px 0px 33px 5px#848C9C；
z指数：1；
背景图像：url（“”）；
边界半径：50px；
不透明度：0.8；
}
.FormPreviewPane.卡住了{
位置：固定；
排名：0；
}
.FormPreviewPaneBackground{
位置：绝对位置；
宽度：337px；
高度：435px；
z指数：0；
不透明度：0.15；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=15）”；