本文介绍了mouseover 函数在队列中出现多次的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
I have this code that fades a div over another one upon mouseover, and fades out when the cursor leave the viewing area.
EXAMPLE: http://jsfiddle.net/3vgbemgu/
$('.under').hover(function () {
$('.over').fadeIn();
}, function () {
$('.over').fadeOut();
});
however, if the user moves the mouse over the area quickly multiple times, the animation creates a queue, meaning the div fades in and out various times one after another. This is much more obvious is there are multiple instances of this animation on screen, or if the fade in and out times are longer.
How would I stop the animation retriggering while it is still occurring the first time?
解决方案
You can use jquery .stop():
$('.under').hover(function() {
$('.over').stop(true, true).fadeIn();
}, function() {
$('.over').stop(true, true).fadeOut();
});
.frame {
position: absolute;
width: 400px;
height: 300px;
}
.under {
width: 100%;
height: 100%;
z-index: 1;
}
.under img {
width: 100%;
height: 100%;
}
.over {
position: absolute;
width: 100%;
height: 100%;
font-size: 36px;
text-align: center;
color: yellow;
background: rgba(64, 64, 64, 0.5);
top: 0;
left: 0;
z-index: 2;
display: none;
}
span {
margin-left: auto;
margin-right: auto;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
<div class="under">
<img src="http://www.thetimes.co.uk/tto/multimedia/archive/00342/114240651_cat_342943c.jpg">
<div class="over">
<a href="http://www.w3schools.com/css/css_positioning.asp">
</br><span>Link 1</span>
</a>
</br>
</br>
</br><a href="http://smallbusiness.chron.com/stretch-image-horizontally-css-43652.html"><span>Link 2</span></a>
</div>
</div>
</div>
这篇关于mouseover 函数在队列中出现多次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!