我的动画blink()使图像(.stone)非常缓慢地消失，它在页面准备好时执行，然后再次onmouseout。我的问题是，当动画期间鼠标移至上方(.stone)时，它将连续执行几次。 我想我必须使用或清除队列或防止默认，以避免这种情况，但不知道如何。有人可以帮忙吗？
<SCRIPT>
$(document).ready(function(){blink();});
function blink(){
$(".stone").animate({opacity:0},10000);
};
$(".stone").on('mouseover',function () {
$('.stone').animate({opacity:1},100);
$(".stone").clearQueue();
});
$(".stone").on('mouseout',function (){blink();});
</SCRIPT><body>
<div id='conteneur'class='responsiveeinstein'><div class='stone'class='responsiveeinstein'><a href='photos.html'><img src='image1/stone aloneintro.jpg'class='responsiveeinstein'/></a></div><div class='stone2'><img src='image1/stone9.jpg'class='responsiveeinstein'/></div><div><a href='photos.html'><h1 id='elementClignotant'>Einstein</h1></a></div></div>
</body>最佳答案
我认为这就是您正在寻找的:
$(document).ready(function(){
var isAnimationFinished = false;
blink();
function blink(){
isAnimationFinished = false;
$(".stone").animate({opacity:0},10000,function() {
isAnimationFinished = true;
});
};
$(".stone").on('mouseover',function () {
if(isAnimationFinished){
$(".stone").stop();
$('.stone').animate({opacity:1},100);
}
});
$(".stone").on('mouseout',function (){blink();});
});
关于javascript - 在结束动画之前避免鼠标检测，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39142824/