CODEWITHSUNDEEP
jquery
maxelcat
maxelcat

Reputation: 1333

jQuery erratic triggering on simple animation

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

});

Upvotes: 0

Views: 129

Answers (3)

Searle
Searle

Reputation: 987

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

Upvotes: 0

Emmett
Emmett

Reputation: 14327

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

Upvotes: 1

hookedonwinter
hookedonwinter

Reputation: 12666

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.

Upvotes: 0

Related Questions