# .hover() for fading effect

Is there a better way to write the JS for this? I'm asking because I read from somewhere that using .hover isn't recommended. Also, if I move the mouse in and out of the box really fast, the box fades in and out the exact number of times I entered/left the box. How do I prevent this?

jsFiddle

$(".project-mask").hover( function() {$(".thumbnail").fadeOut(300);
$(".description").fadeIn(300); }, function() {$(".thumbnail").fadeIn(300);
$(".description").fadeOut(300); } ); .project-mask { height:260px;position:relative;width:260px } .thumbnail, .description { position:absolute;width:100% } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article class="project"> <div class="project-mask"> <div class="thumbnail"> <img src="http://dummyimage.com/260x260/000/fff" height="260" width="260" /> </div> <div class="description"> <p>blah blah blah</p> </div> </div> </article> ## 2 Answers This type of functionality is what .hover() was designed for. I wouldn't recommend using anything else. As far as avoiding building up a queue of events when hovering, jQuery has the .stop() method for that very reason. $(".project-mask").hover(
function() {
$(".thumbnail").stop(true, true).fadeOut(300);$(".description").stop(true, true).fadeIn(300);
},
function() {
$(".thumbnail").stop(true, true).fadeIn(300);$(".description").stop(true, true).fadeOut(300);
}
);


Here is a fiddle

This might work too. At least you should traverse!

$(".project-mask").hover(function() {$(this).find(".thumbnail, .description").stop(true, true).fadeToggle(300);
});