Double circular rotation button
I made a button composed of two circles 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 the overlay to appear when I hover over it, so my problem is that when I am on it, there is a breakpoint between the first and second circles and that the overlay disappears and reappears, how can I fix it?
source to share
stop()
any current 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>
source to share
It's not because of the space between the circles, but going from the outer to the inner circle triggers a pointer event (mouseout, mousein), which causes the animation to start.
You can prevent this by completely disabling these events on the inner circle by adding one line of CSS to the inner circle. The rest of the code can remain the same and there are minor side-effect changes since you don't need any workarounds for the animation. IE only supports this since version 11 .
pointer-events: none;
$('.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;
pointer-events: none;
}
<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>
source to share