jquery mouse hover effect bug, mouseover event always triggers a few times on mouseout

Question

I have a simple gallery grid with a nested span that shows the title, which I want to slide up on mouse over, and hide on mouse out.

Everything works fine, except whenever the mouse moves down to where the title is and/or hovers out of the tile from the bottom of the tile, then the hover effect repeats a few times uncontrollably.

At first I thought it might be because the span is contained within the anchor which is the hover trigger, but moving it out didn't work either.

Any ideas ?

The demo is here : http://www.winterealm.com/gallery/

Markup:

<div class="gallery_container">
    <ul>
        <li><a href=""><img src="assets/img/artistisch.jpg" alt="aaa"/><span class="title">Category A</span></a></li>
        <li><a href=""><img src="assets/img/attraktiv.jpg" alt="bbb"/><span class="title">Category B</span></a></li>
        <li><a href=""><img src="assets/img/historisch.jpg" alt="ccc"/><span class="title">Category C</span></a></li>
        <li><a href=""><img src="assets/img/popart.jpg" alt="ddd"/><span class="title">Category D</span></a></li>
        <li><a href=""><img src="assets/img/portrait.jpg" alt="eee"/><span class="title">Category E</span></a></li>
        <li><a href=""><img src="assets/img/sketch.jpg" alt="fff"/><span class="title">Category F</span></a></li>
    </ul>
</div>

Here's the jquery

$(document).ready(function(){
    $('.gallery_container a').mouseover(function(){
        $(this).children('.title').animate({
            opacity: 100,
            bottom: 0
        },200);
    });

    $('.gallery_container a').mouseout(function(){
        $(this).children('.title').animate({
            opacity: 0,
            bottom: -30
        },200);
    });
});

Supranatural

Answer 1

The problem here is that mouseover fires every time the mouse moves over the element or child elements. Try using the mouseenter and mouseleave events instead.

Mestee

Yes, shortest solution = best! this seems to be the way to do it! Thanks alot! – Supranatural

Answer 2

Try this.

$(document).ready(function() {
$('.gallery_container a').hover(function() {
    $(this).children('.title').stop().animate({
        opacity: 100,
        bottom: 0
    }, 200);
}, function() {
    $(this).children('.title').stop().animate({
        opacity: 0,
        bottom: -30
    }, 200);
}); 
});

You can see a live demo here. - http://jsfiddle.net/8Hd7s/

Timeless

This works too, but there's a slight nudge that prevents the slides from animating when rolling the mouse over the entire row quickly. Good for when you don't want everything to animate everytime you pass by... thanks for the solution! – Supranatural

Based off your original problem, I thought that's what you were trying to avert. You can change this simply by removing .stop() before animate functions. – Timeless

Hi @AustinBrunkhorst can you please help with this one : #31835628 – Keniakenilworth

Answer 3

So you may want to implement a really simple locking mechanism, as in:

var fCurrentlyMoving = false;       
$('.gallery_container a').mouseover(function(){
    if (!fCurrentlyMoving) {
        fCurrentlyMoving = true;
        $(this).children('.title').animate({
            opacity: 100,
            bottom: 0
        },200, function() {
            fCurrentlyMoving = false;
        });
    }
});

it's not airtight race-condition-wise, but it doesn't need to be.

Sedgewake