jquery animate producing odd results

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.

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

$("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 = "";

    });

For anyone interested, here's the complete solution.

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

I think the reason it doesn't return to it's original position is that the original position is taken as mid-animation. I would suggest building a simple plugin to do it for you:

$.fn.hoverAnimation = function () {
  return this.each(function () {
    var originalLeft = parseInt($("img#" + $(this).find(img).attr(id) + "-spot").css("left"));
    var originalTop  = parseInt($("img#" + $(this).find(img).attr(id) + "-spot").css("top"));
    return $(this).hover(function () {
      ...
    },function () {
      ...
    });
  }
};

$('div').hoverAnimation();