Stuttering on mouseout of moved image element
<p>Basically, when hovering over an image, I'd like to move the image slightly and then on mouseout, return the image to the original location. I've got a version of the code that works to accomplish this task but there is a bit of a "stuttering" effect if the user was to move the mouse from the image into the area where the image was located originally.</p>

<pre><code>          -----
          |   |
-----     |img|
|   |     |   |
|img| ==&gt; -----
|   |     xxxxx
-----     xxxxx
</code></pre>

<p>In the diagram above, when the mouse hovers over the image, it gets nudged up 2 units. On mouseout, the image returns to the original position. My code, as below, works but when the mouse gets moved into the previously vacated area (e.g., the x's), the code thinks that it's hovering over the image again and then moves the image back up 2 units. This creates a sort of stuttering effect when hovering the mouse over the area marked by x above.</p>

<p>I've tried different approaches (e.g., using animate(), adding/removing a wrapper div, using setTimeout(), etc) but they all produce the same undesired effect. I considered constantly monitoring the mouse position on the page and remembering the position of the image, but that seems excessive, esp since there could be anywhere between 1 and n images.</p>

<pre><code>$(document).ready(function() {
    $('.hoverImage').hover(
        function(){
            $(this).offset({'top':$(this).offset().top-2});
        },
        function(){
            $(this).offset({'top':$(this).offset().top+2});
        }
    );
});
</code></pre>

<p>Here is a jsfiddle demo-ing the issue: <a href="http://jsfiddle.net/Ut8eK/" rel="nofollow">http://jsfiddle.net/Ut8eK/</a></p>

<p>Any tips would be much appreciated. Thanks in advance!</p>

<p><strong>Update</strong></p>

<p>Awesome. I ended up using a bit of both answers:</p>

<pre><code>$(document).ready(function() {
    $('.hoverImage').wrap('&lt;div class="hoverImageWrapper" style="display: inline-block;"&gt;');
    $('.hoverImageWrapper').hover(
        function(){
            $('.hoverImage',this).offset({'top':$(this).offset().top-10});
        },
        function(){
            $('.hoverImage',this).offset({'top':$(this).offset().top});
        }
    );
});
</code></pre>

<p>Here's a jsfiddle of the above: <a href="http://jsfiddle.net/rf5mE/" rel="nofollow">http://jsfiddle.net/rf5mE/</a></p>

<p>This works great for my needs, since adding the functionality will be super easy just by adding <code>class="hoverImage"</code> to the appropriate images.</p>

<p>I accepted @Matyas as the answer only because his answer came through first (by about 4 seconds!).</p>

<p>Thanks y'all!</p>
