Geek Answers Handbook

Jquery mouse hover effect bug, the mouseover event always fires several times on mouse output

I have a simple grid grid with a nested range that shows the title that I want to move up the mouse and hide from the mouse.

Everything works fine, except when the mouse moves down to where the header and / or soars from the tile from the bottom of the tile, the freezing effect is repeated several times uncontrollably.

At first I thought that this could be because the span is contained in the anchor, which is the hover trigger, but its movement does not work either.

Any ideas?

Demo 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 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);
    });
});
+5
3

, , . mouseenter mouseleave.

+8

.

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

. - http://jsfiddle.net/8Hd7s/

+3

This way you can implement a really simple locking mechanism, for example:

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

this is not an airtight race condition, but it should not be.

0
source

More articles:


All Articles