.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% }
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;article class="project"&gt;
  &lt;div class="project-mask"&gt;
    &lt;div class="thumbnail"&gt;
      &lt;img src="http://dummyimage.com/260x260/000/fff" height="260" width="260" /&gt;
    &lt;/div&gt;
    &lt;div class="description"&gt;
      &lt;p&gt;blah blah blah&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;
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