jquery animate producing odd results
<p>I have a selection of icons which when I hover over them trigger an animation which involves animating the left and top position of a different image. Then when I mouseout of the icon the image returns to it's original state. The trouble is that if I frantically move the cursor over all the icons really quickly, the left and top positions of the animated images do not return to their initial state as expected.</p>

<p>Here's the code - any ideas how I can tidy this up and prevent this and any further problems??</p>

<pre><code>$("div").hover( function() {

        $(this).find("span").slideDown(100);
        $(this).css("background-color","#89A7BA");
        var currentlyHovered = $(this).find("img").attr("id").replace("-icon", "");
        $("img#" + currentlyHovered + "-spot").animate({
            width: "17px",
            height: "17px",
            left: parseInt($("img#" + currentlyHovered + "-spot").css("left")) - 5,
            top: parseInt($("img#" + currentlyHovered + "-spot").css("top")) - 5
        }, 100);


    }, function() {

        $(this).find("span").slideUp(100);
        $(this).css("background-color","#000");
        $("img#" + currentlyHovered + "-spot").animate({
            width: "7px",
            height: "7px",
            left: parseInt($("img#" + currentlyHovered + "-spot").css("left")) + 5,
            top: parseInt($("img#" + currentlyHovered + "-spot").css("top")) + 5
        }, 100);
        currentlyHovered = "";

    });
</code></pre>

<p>For anyone interested, here's the complete solution.</p>

<pre><code>$.fn.hoverAnimation = function () {
        return this.each(function () {
            var currentlyHovered = $(this).find("img").attr("id").replace("-icon", "");
            var originalLeft = parseInt($("img#" + currentlyHovered + "-spot").css("left"));
            var originalTop  = parseInt($("img#" + currentlyHovered + "-spot").css("top"));
            return $(this).hover(function () {
                $(this).find("span").slideDown(100);
                $(this).css("background-color","#89A7BA");
                $("img#" + currentlyHovered + "-spot").animate({
                    width: "17px",
                    height: "17px",
                    left: originalLeft - 5,
                    top: originalTop - 5
                }, 100);
            },function () {
                $(this).find("span").slideUp(100);
                $(this).css("background-color","#000");
                $("img#" + currentlyHovered + "-spot").animate({
                    width: "7px",
                    height: "7px",
                    left: originalLeft,
                    top: originalTop
                }, 100);
            });
        });
    }

    $("div").hoverAnimation();
</code></pre>
