如何停止鼠标切换或悬停时的图像切换
如何停止鼠标切换或悬停时的图像切换
提问于 2017-07-24 11:17:59
我必须不停地切换鼠标/悬停的两个图像，在停止悬停时停止同样的切换，
我所做的
这是我的HTML
<div class="fader">
<img src="image1" />
<img src="image2" />
</div>这是我的JQuery
$('.fader').hover(function() {
toggleImage();
});
function toggleImage() {
if($('.fader').is(":hover")) {
$('.fader').find("img").fadeToggle(1000);
toggleImage();
}
}我用过的一些CSS
.fader {
display: inline-block;
}
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}我面临的问题是，我需要停止我的无限循环的toggleImage()函数在鼠标或当悬停停止。
我试着检查:悬停
$('.fader').is(":hover")但这不管用。
我必须停止鼠标/悬停的无限循环。
有什么建议吗？
有关创建一个小提琴的更多帮助
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-07-24 11:32:40
仅使用Css的：
* {
margin: 0;
padding: 0;
}
.fader {
display: inline-block;
}
.fader img {
transition: all .2s;
}
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.fader:hover img:first-child {
animation: toggle .5s infinite alternate .5s;
}
.fader:hover img:last-child {
opacity: 1;
animation: toggle .5s infinite alternate;
}
@keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="fader">
<img src="http://placehold.it/200x200/fff000" />
<img src="http://placehold.it/200x200" />
</div>
Stack Overflow用户
发布于 2017-07-24 11:25:09
您可以使用类似于以下内容的setInterval和clearInterval：
var toggleTimer;
$('.fader').hover(function() {
toggleTimer = setInterval(toggleImage, 1000)
}, function() {
clearInterval(toggleTimer)
});
function toggleImage() {
$('.fader').find("img").fadeToggle(1000);
}.fader {
display: inline-block;
}
.fader img:last-child {
position: absolute;
top: 0;
left: 0;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader">
<img src="http://lorempixel.com/200/200" />
<img src="http://lorempixel.com/200/200" />
</div>
Stack Overflow用户
发布于 2017-07-24 11:21:54
请像这样试试
$('.fader').hover(function() {
toggleImage();
});
function toggleImage() {
$('.fader').find("img").fadeToggle(1000);
//toggleImage(); //Comment this code
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45279256
复制相关文章
相似问题
腾讯云开发者
