CODEWITHSUNDEEP
jqueryhoverjquery-animatemouseovermouseout
Winterain
Winterain

Reputation: 384

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

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);
    });
});

Upvotes: 6

Views: 6920

Answers (3)

Coomie
Coomie

Reputation: 4868

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.

Upvotes: 8

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

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/

Upvotes: 4

Robert Martin
Robert Martin

Reputation: 17157

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.

Upvotes: 0

Related Questions