offet().left is null or not an object + stop animation after mouseenter
<p>I get an error on the one of my lines of code in Internet Explorer it says:</p>

<blockquote>
  <p>offset().left is null or not an object</p>
</blockquote>

<p>This line is inside the <code>each</code> statement and positions the <code>div.container</code> to its left position.</p>

<p>So what happens is when you mouse over the menu item in <code>div.container</code> it positions the next <code>div.container</code> to the right side of it and continues for each <code>div.container</code> thats one problem.<br>
The other problem is to stop the animation once you have mouseentered the menu item.</p>

<p>I've commented which line is the problem <a href="http://jsfiddle.net/ra7Q6/4/" rel="nofollow">jsFiddle</a> </p>

<p>My other task is to move them to the left when the mouse is moving backwards through the <code>div.containers</code> if you have an answer let me know i need some help.</p>

<pre><code>function positionElement(prev, next) {
    $(next).css({ 'left': ($(prev).offset().left + $(prev).width()) - $(next).width() });
}

$('.menu-item').mouseenter(function () {
     positionElement($(this).closest('.container'), $(this).closest('.container').next('.container'))

     /* this line below throws an error on the last mouseenter in ie*/
     $(this).closest('.container').next('.container').animate({ 'left': $(this).closest('.container').next('.container').offset().left + $(this).closest('.container').next('.container').width() });

});              
&lt;div&gt;
    &lt;div class="container" style="width:220px; height:220px; z-index:999; position:absolute; background-color:Aqua; float:left"&gt;
        &lt;div class="menu-item"&gt;Menu Item 1&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 2&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container" style="width:200px; height:200px; z-index:998; position:absolute; background-color:Blue; float:left"&gt;
        &lt;div class="menu-item"&gt;Menu Item 4&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 5&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 6&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container" style="width:180px; height:180px; z-index:997; position:absolute; background-color:Fuchsia; float:left"&gt;
        &lt;div class="menu-item"&gt;Menu Item 7&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 8&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 9&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container" style="width:160px; height:160px; z-index:996; position:absolute; background-color:Green; float:left"&gt;
        &lt;div class="menu-item"&gt;Menu Item 10&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 11&lt;/div&gt;
        &lt;div class="menu-item"&gt;Menu Item 12&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
