3
\$\begingroup\$

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>

\$\endgroup\$
1
\$\begingroup\$

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

\$\endgroup\$
0
\$\begingroup\$

This might work too. At least you should traverse!

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.