[英]Image flickering in setInterval on hover
这是一个图像滑块。 当我将鼠标悬停在滑块上时,一切正常,播放/暂停按钮出现。 当我将鼠标悬停在滑块显示区域之外时,播放和暂停按钮消失。 但是当我将鼠标悬停在播放/暂停图像本身的区域上时,播放/暂停的图像会闪烁。
有没有办法停止闪烁?
当您将鼠标悬停在滑块上时,会出现播放和暂停图像。 单击播放时,它变为暂停,反之亦然。 播放和暂停开启和关闭自动滑动
代码片段:
HTML
<section>
<img src="img/arrow-left.png" alt="Previous" id="prev">
<div id="outsideSlider">
<img alt="play" src="img/play.png" id="play">
<img alt="pause" src="img/pause.png" id="pause">
<div id="slider">
<div class="slide">
<div class="sliderText">
<h2>Hark! Stay alert</h2>
<p>Some text</p>
</div>
<img src="img/slide1.jpg" alt="Slide 1">
</div>
</div>
</section>
jQuery
setInterval(function(){
playpause();
},1);
//function to switch between play button and pause button on click
function playpause(){
if($('#pause').hasClass('activeButton'))
{
$('#slider,#play,#pause').click(function(){
$('#pause').removeClass('activeButton');
$('#play').addClass('activeButton');
$('#pause').hide();
$('#play').show();
autoswitch=false;
});
}
//When play is clicked, activate pause button
else if($('#play').hasClass('activeButton'))
{
$('#slider,#play,#pause').click(function(){
$('#play').removeClass('activeButton');
$('#pause').addClass('activeButton');
$('#play').hide();
$('#pause').show();
autoswitch=true;
});
}
}
我找到了这个问题的答案。
问题不在我上面发布的代码中。 它在这个函数中:
function showhide()
{
$('.slide,#play,#pause').mouseenter(function(){
tt=setInterval(function(){
$('.activeButton').show();
},1);
}).mouseleave(function(){
clearInterval(tt);
$('.activeButton').hide();
});
}
我将 .show() 函数移到了 setInterval 之外,瞧! 无闪烁
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.