我制作了一个由两个圆圈组成的按钮,如下所示:
$('.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>
我希望当我将鼠标悬停在其上时,会出现覆盖层,所以我的问题是,当我将鼠标悬停在其上时,第一个和第二个圆圈之间有一个断点,这会使覆盖层消失并出现,我该如何修复它?
最佳答案
stop()
任何当前正在运行的动画:
$('.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>
关于jquery - 双圆圈按钮悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31756123/