.hover() for fading effect

Question

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>

Answer 1

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

Answer 2

This might work too. At least you should traverse!

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