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

以上就是jquery animate producing odd results的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏