Double circle button hover

Question

I made a button compose by two circle like this:

$('.circle').mouseover(function(){
			$('.overlay').animate({opacity:0.7,}, 200);
		});	
$('.circle').mouseout(function(){
	$('.overlay').animate({opacity:0}, 100);
});

.overlay{
	position:absolute;
	background:black;
	width:100%;
	height:100%;
	opacity:0;
}
	


.circle{
	position:absolute;
	width:30px;
	height:30px;
	border:1px dashed #fc7945;
	border-radius:50px;
	cursor:pointer;
	z-index:99;
}

.circle-in{
	width:20px;
	height:20px;
	margin-top:2px;
	background:none;
	margin-left:2px;
	border:3px solid #fc7945;
	border-radius:50px;
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay"></div> 

<a><div class="circle">
        	<div class="circle-in"></div>
        </div></a>

and i want that when i hover on it the overlay appear, so my problem is that when i hover on it there is a breakpoint between the first and the second circle and that make the overlay disappear and appear how can i fix it ?

Answer 1

stop() any currently-running animations:

$('.circle')
  .mouseover(function() {
    $('.overlay').stop().animate({  //add stop() here
      opacity: 0.7,
    }, 200);
  })
  .mouseout(function() {
    $('.overlay').stop().animate({  //and here
      opacity: 0
    }, 100);
  });

$('.circle')
  .mouseover(function() {
    $('.overlay').stop().animate({
      opacity: 0.7,
    }, 200);
  })
  .mouseout(function() {
    $('.overlay').stop().animate({
      opacity: 0
    }, 100);
  });

.overlay {
  position: absolute;
  background: black;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.circle {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 1px dashed #fc7945;
  border-radius: 50px;
  cursor: pointer;
  z-index: 99;
}
.circle-in {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: none;
  margin-left: 2px;
  border: 3px solid #fc7945;
  border-radius: 50px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="overlay"></div>

<a>
  <div class="circle">
    <div class="circle-in"></div>
  </div>
</a>