我有这些泡泡，这些泡泡与它们背后的背景相联系。 每个气泡与不同的背景相关联，例如，如果第一个气泡是活动气泡，则背景为红色，如果第二个气泡是活动气泡，则背景变为蓝色，以此类推。 要使一个气泡活跃，你只需悬停在它上面。 另一种改变哪个气泡活跃的方法是什么也不做，每隔5秒，下一个气泡就会活跃起来。
一切都运行良好，正如预期的那样，但有一个微小的bug。
如果你悬停在一个气泡上，这将使气泡活跃，但如果你最终保持鼠标在那里（5秒后），活跃的气泡将成为下一个气泡，尽管鼠标在原来的气泡上。 问题是--当用户将鼠标放在任何圆圈上时，是否有一种方法可以暂停setInterval函数，而一旦鼠标不在任何气泡上，setInterval函数就可以恢复？
null
jQuery($ => {
let $rect = $('.rect')
let $circles = $('.circle').on('mouseover', setActiveCircle)
$circles.first().trigger('mouseover')
function setActiveCircle() {
$circles.removeClass('active-circle')
$(this).addClass('active-circle')
$rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'))
}
setInterval(function() {
let $activeCircle = $circles.filter('.active-circle')
let $targetCircle = $activeCircle.next()
if ($targetCircle.length === 0)
$targetCircle = $circles.first()
setActiveCircle.call($targetCircle)
}, 5000)
}).rect {
display: flex;
justify-content: center;
background: #fbc1d7;
padding: 50px;
background-size: cover;
background-position: center;
}
.rect-container {
display: grid;
grid-template-columns: 1fr 1fr;
width: 1100px;
}
.rect-1 {
background: red;
}
.rect-2 {
background: blue;
}
.rect-3 {
background: yellow;
}
.rect-4 {
background: green;
}
.grid-2-small {
display: grid;
grid-template-columns: 1fr 1fr;
}
.circle {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: #910700;
opacity: .4;
transition: ease .5s;
cursor: pointer;
}
.circle:hover {
opacity: .7;
transform: scale(1.05);
text-decoration: none;
}
.active-circle {
opacity: .9;
transform: scale(1.25);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rect">
<div class="rect-container">
<div></div>
<div>
<div class="grid-2-small">
<a class="circle" data-rect="rect-1"></a>
<a class="circle" data-rect="rect-2"></a>
<a class="circle" data-rect="rect-3"></a>
<a class="circle" data-rect="rect-4"></a>
</div>
</div>
</div>
</div>null
如果其中一个圆圈当前处于活动状态，则可以签入间隔处理程序。 通过使用.circle:hover选择器，这相对容易:
...
setInterval(function() {
// check if one of the circle is currently active (mouse over)
const hoverCircle = document.querySelector('.circle:hover');
if (hoverCircle) {
return; // do not change the background
}
let $activeCircle = $circles.filter('.active-circle')
let $targetCircle = $activeCircle.next()
if ($targetCircle.length === 0)
$targetCircle = $circles.first()
setActiveCircle.call($targetCircle)
}, 5000)
})
...
您可以使用ClearInterval下面是一个工作示例jsfiddle
null
jQuery($ => {
let $rect = $('.rect')
let $circles = $('.circle').on('mouseover', setActiveCircle)
$circles.first().trigger('mouseover')
function setActiveCircle() {
$circles.removeClass('active-circle')
$(this).addClass('active-circle')
$rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'))
}
function circletimer(){
let $activeCircle = $circles.filter('.active-circle')
let $targetCircle = $activeCircle.next()
if ($targetCircle.length === 0)
$targetCircle = $circles.first()
setActiveCircle.call($targetCircle)
}
var stopinter=setInterval(circletimer(), 5000)
if( $circles.first().trigger('mouseover')) clearInterval(stopinter)
}).rect {
display: flex;
justify-content: center;
background: #fbc1d7;
padding: 50px;
background-size: cover;
background-position: center;
}
.rect-container {
display: grid;
grid-template-columns: 1fr 1fr;
width: 1100px;
}
.rect-1 {
background: red;
}
.rect-2 {
background: blue;
}
.rect-3 {
background: yellow;
}
.rect-4 {
background: green;
}
.grid-2-small {
display: grid;
grid-template-columns: 1fr 1fr;
}
.circle {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: #910700;
opacity: .4;
transition: ease .5s;
cursor: pointer;
}
.circle:hover {
opacity: .7;
transform: scale(1.05);
text-decoration: none;
}
.active-circle {
opacity: .9;
transform: scale(1.25);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rect">
<div class="rect-container">
<div></div>
<div>
<div class="grid-2-small">
<a class="circle" data-rect="rect-1"></a>
<a class="circle" data-rect="rect-2"></a>
<a class="circle" data-rect="rect-3"></a>
<a class="circle" data-rect="rect-4"></a>
</div>
</div>
</div>
</div>