jquery - mouseover function occurring multiple times in a queue -
i have code fades div on 1 upon mouseover, , fades out when cursor leave viewing area.
example: http://jsfiddle.net/3vgbemgu/
$('.under').hover(function () { $('.over').fadein(); }, function () { $('.over').fadeout(); });
however, if user moves mouse on area multiple times, animation creates queue, meaning div fades in , out various times 1 after another. more obvious there multiple instances of animation on screen, or if fade in , out times longer.
how stop animation retriggering while still occurring 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>
Comments
Post a Comment