javascript - Stuttering on mouseout of moved image element -

Actually, when hovering over an image, I want to move the image slightly more then mouseout, return the image Original Place I have a version of this code that works to accomplish this task, but if the "mouse" is a bit of the "here and there" effect, then the user was moving the mouse from that image Where the image was originally located. ----- | | ----- | Img | | | | | | Img | ==> ----- | | In the above diagram, when the mouse jumps over the image, it is pulled up to 2 units. On mouseout, the image returns to the original state. My code works, but when the mouse is moved to an empty area (for example, X), the code thinks that it is hovering over the image again and then the image is returned to 2 units It is brought about by hovering the mouse over the area marked upwards, it creates a kind of rattling effect.

I have tried various methods (such as using animate (), adding / removing a wrapper div using the settimeout, etc.) but they all produce the same unwanted effects. I constantly monitor the status of the mouse on the page and remember the status of the image, but it seems highly, because there can be anywhere between 1 and n images.

  $ (document). Ready (work () ($ ('.hoverImage'). Hover (function () {$ (this) .offset ({'top': $ (this) .offset () top-2});}, function () {$ (This) .offset ({'top': $ (this) .offset (. Top + 2});});});   
 On this issue There is a JSFEDL demo:  
 Any suggestion will be appreciated. Thanks in advance!  
  Update   
 Good for both replies Finished using a bit:  
  $ (document) .ready (function () {$ ('.overover_mage'). Rap ​​('& lt; div class = "hoverImageWrapper" Style = "display: inline-block;" & gt; '); $ (' .hover image Hover (function () {$ ('. Hover image', this) .offset ({'top': $ (this) .offset (). Top-10});}, function () {$ ('. Hover image', this) .offet ({'top': $ (this) .offet (). Top}}}}};});   
 It is a JSField:  
 This works very well for my needs, because by adding it  class = "hoverImage"  for suitable pictures.  
 I Answer as a response only accepted acceptance because the answer came from already (about 4 sec Till the end!).  
 Thank you!  
  
 
 
 You should put your image in the envelope, and you should listen to the hover in the cover, which Can not change this way you should get consistent effect  
 Edit: The problem is that the image decreases in comparison to the size of the mouse (the original size of the image): add 10px bottom padding in the div If this image decreases by 10px, then there may be a division in its background, if it is done.  
:  
 HTML  
 & lt; Br / & gt; & Lt; Div & gt; & Lt; IMG src = "http://placekitten.com/120/100" class = "hover image" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; IMG src = "http://placekitten.com/100/100" class = "hover image" /> & Lt; / Div & gt; & Lt; Div & gt; & Lt; IMG src = "http://placekitten.com/110/100" class = "hover image" /> & Lt; / Div & gt;  
 js  
  $ (document) .ready (function () {$ ('div'). Hover (function () {// search wrapper (specified by this ) $ ('. Hover image', this) .offet ({'top': $ (this). Offset () top-10});}, function () {$ ('.overover_mage', this). Offset ({'top': $ (this). Offset (). Top + 10});});});   
 CSS:  
  div {display: inline-block; } Div: Hover {padding-down: 10px; }