jquery动画产生奇怪的结果

我有一个图标的选择，当我把鼠标悬停在它们上面时，会触发一个动画，这个动画包括动画不同图像的左边和上边位置。然后，当我将鼠标移出图标时，图像会返回到原始状态。麻烦的是，如果我真的很快地将光标移动到所有图标上，则动画图像的左侧和顶部位置不会像预期的那样返回到其初始状态。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();

来源

2010-12-10 Tom

我很高兴我的解决方案为你工作。我非常喜欢将简单但可重复的任务构建为专门的jQuery插件。 – 2010-12-15 10:17:07

我认为它不回到原来的位置的原因是原始位置被视为中间动画。我建议建立一个简单的插件为你做：

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

来源

2010-12-10 15:47:07

jquery动画产生奇怪的结果

回答

相关问题