0

At the moment when you hover on any of the three items in my menu, there is a light blue dot that begins flashing red. I want that animation to stop when the user is no longer hovering over FormsItem1, FormsItem2, or FormsItem3 divs. I tried using the mouseover and mouseout functions but after I stop hovering the color changing animation seems to just arbitrarily keep going. How can I confine the color changing animations to when the user is hovering?

Here is my Jquery code:

<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>

Here is my 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>

Here is my 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>
Improve this question

1 Answer 1

Reset to default
1 

<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 -->
<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>






<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>

<script>

$(document).ready(function(){

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

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

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


    $("#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>

When dealing with intervals, be wary of running them multiple times. Also you can call finish() to stop the animations

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.