jquery anime produire des résultats impairs

Question

J'ai une sélection d'icônes qui, lorsque je les survole, déclenche une animation qui consiste à animer la position gauche et supérieure d'une image différente. Ensuite, lorsque je souris de l'icône, l'image retourne à son état d'origine. Le problème est que si je déplace frénétiquement le curseur sur toutes les icônes très rapidement, les positions gauche et supérieure des images animées ne reviennent pas à leur état initial comme prévu.

Voici le code - des idées comment je peux ranger cela et prévenir cela et d'autres problèmes?

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

    }); 

Pour ceux qui sont intéressés, voici la solution complète.

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

Answer 1

Je pense que la raison pour laquelle il ne revient pas à sa position d'origine est que la position d'origine est considérée comme mi-animation. Je suggère de construire un simple plugin pour le faire pour vous:

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