jQuery erratic triggering on simple animation
<p>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.</p>

<p>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.</p>

<p>You can see this a <a href="http://www.ypfservice.net" rel="nofollow">www.ypfservice.net</a></p>

<p>Thanks in advance</p>

<p>E</p>

<p>here's my jQuery:</p>

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

    for (var j = 0; j &lt; numberLinks; j++) {

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

        //    var currentLink = $('a.panelImage:eq('+j+')');                  
        $('&lt;div class="fred"&gt;&lt;/div&gt;').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

});
</code></pre>
