Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
    });
});
like image 368
Winterain Avatar asked Aug 24 '11 06:08

Winterain


1 Answers

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.

like image 171
Coomie Avatar answered Oct 15 '22 17:10

Coomie