.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>

Blake Plumb · Accepted Answer · 2013-04-25 15:24:27Z

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

tolborg · Accepted Answer · 2013-06-09 11:00:22Z

0

This might work too. At least you should traverse!

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

answered Jun 9, 2013 at 11:00

tolborg

1834 bronze badges

Add a comment |

Stack Exchange Network

.hover() for fading effect

2 Answers 2

You must log in to answer this question.

Hot Network Questions

.hover() for fading effect

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions