jQuery erratic triggering on simple animation

Question

Hi I have an image around 150px wide by 300px deep. When I roll over it I want a little image to pop up on top. When I roll off the bigger image I want the smaller one to disappear.

It all works, except that if you mouseover the triggering image where the new image pops up then it appears to go into some kind of loop or behave erratically as you move themouse. I have tried hover and mouseover/out. I expect it is triggering rolloff/rollon events as the mouse is moved.

You can see this a www.ypfservice.net

Thanks in advance

E

here's my jQuery:

$(document).ready(function () {
    var numberLinks = $('a.panelImage').length;

    for (var j = 0; j < numberLinks; j++) {

        var currentLink = $('a.panelImage').eq(j);

        //    var currentLink = $('a.panelImage:eq('+j+')');                  
        $('<div class="fred"></div>').insertAfter(currentLink);

        var gtr = currentLink.position().left + 'px';

        $(currentLink).next().css({ // ie div.fred
            'position': 'absolute',
            'background-position': '0 0',
            'top': '100px',
            'left': gtr,
            'display': 'none',
            'width': '5px',
            'height': '5px',
            'overflow': 'hidden',
            'backgroundImage': 'url(http://www.ypfservice.net/templates/ypftemplate/images/foyerPreview.jpg)',
        });

    }


    $('a.panelImage img').mouseover(function () {
        $(this).parent().next().stop().animate({
            height: '138px',
            width: '184px'
        }, 500)
    }).mouseout(function () {
        $(this).parent().next().stop().animate({
            'width': '0px',
            'height': '0px'
        }, 500);
    }); //end function

});

Answer 1

The smaller image is part of the same selector of the bigger image. As you mouse out of the big image and mouse over the smaller one, you trigger both the out and over events.

Try giving the bigger image an ID, and using that.

Answer 2

Handle the mouseover/mouseout events for the parent element instead:

$('a.panelImage').parent().mouseover(function () {
    $(this).find(".panelImage").next().stop().animate({
        height: '138px',
        width: '184px'
    }, 500)
}).mouseout(function () {
    $(this).find(".panelImage").next().stop().animate({
        'width': '0px',
        'height': '0px'
    }, 500);
}); //end function

Answer 3

Use mouseenter and mouseleave instead. jQuery fires a mouseout when you touch your animated element. That won't happen with mouseenter/mouseleave.