Javascript jquery动画生成奇数结果

我选择了一些图标，当我将鼠标悬停在这些图标上时，它们会触发一个动画，其中涉及到为不同图像的左上方位置设置动画。然后，当我将鼠标移出图标时，图像将返回到其原始状态。问题是，如果我疯狂地将光标快速移动到所有图标上，动画图像的左侧和顶部位置将不会恢复到预期的初始状态

这是代码-有什么想法我可以整理一下，防止这和任何进一步的问题

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

    });

对于任何感兴趣的人，这里是完整的解决方案

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

---

我认为它没有返回到原始位置的原因是原始位置被视为中间动画。我建议为您构建一个简单的插件：

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

---

我认为它没有返回到原始位置的原因是原始位置被视为中间动画。我建议为您构建一个简单的插件：

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

---

我很高兴我的解决方案对你有用。我非常喜欢为简单但可重复的任务构建特别的jQuery插件。我很高兴我的解决方案为您提供了帮助。我非常喜欢为简单但可重复的任务构建临时jQuery插件。