Javascript, stopping animation if mouse is on certain location
<p>I am stuck with this problem and cant think of a way outside of this. Have a look at the image </p>

<p><a href="http://i.stack.imgur.com/7xxjS.png" rel="nofollow">http://i.stack.imgur.com/7xxjS.png</a></p>

<p><img src="http://i.stack.imgur.com/7xxjS.png" alt="reference image for the problem"></p>

<p>Now the problem is, the div is not a part of the li, and on leaving the li(and entering the div) the li collapses back. This needs to be handled and I am stuck on how to do this.</p>

<p>Below is the javascript code</p>

<pre><code>    a.cache.brand_nav.find("li a").hover(function (c) {
        if (a.isTablet &amp;&amp; c.currentTarget.href !== f) d.location = c.currentTarget.href;
        else {
            a.cache.brand_nav.find("li a").css('top', '0px'); //Collapsing all li's before expanding one
            c = b(this);
            c.stop(true, true).animate({ top: '-' + c.find("img").height() + 'px' }, 250, 'easeInCirc');
            $('#bgIdeas').stop(true, true).animate({ bottom: '+' + parseInt(parseInt(c.find("img").height())).toString() + 'px' }, 500, 'easeInCirc', false);
            $('.outerBGs').hide();
            $('#backgrounds').hide();
            if (this.className == 'ideas') {
                $('#ideasBG').stop(true, true).show(5000, 'easeOutExpo');
                $('#bgIdeas').empty();
                $('#bgIdeas').append('&lt;p style=" position:absolute; left:22%; margin-top:10px;"&gt;&lt;img src="images/ideas/ideas_worldofideas_thumb.jpg"&gt;&lt;br&gt;World of Ideas&lt;/p&gt;         &lt;p style=" position:absolute; left:32%; margin-top:10px;"&gt;&lt;img src="images/ideas/ideas_history_thumb.jpg"&gt;&lt;br&gt;History&lt;/p&gt;           &lt;p style=" position:absolute; left:42%; margin-top:10px;"&gt;&lt;img src="images/ideas/ideas_gulahmed_thumb.jpg"&gt;&lt;br&gt;About Gul Ahmed&lt;/p&gt;          &lt;p style=" position:absolute; left:52%; margin-top:10px;"&gt;&lt;img src="images/ideas/ideas_partner_thumb.jpg"&gt;&lt;br&gt;Be an Ideas Partner&lt;/p&gt;');
            }
            else
                if (this.className == 'women') {
                    $('#womenBG').stop(true, true).show(5000, 'easeOutExpo');
                    $('#bgIdeas').empty();
                    $('#bgIdeas').append('&lt;p style=" position:absolute; left:42%; margin-top:10px;"&gt;&lt;img src="images/women/women_fabrics_thumb.jpg"&gt;&lt;br&gt;Fabric&lt;/p&gt;          &lt;p style=" position:absolute; left:52%; margin-top:10px;"&gt;&lt;img src="images/women/women_readytowear_thumb.jpg"&gt;&lt;br&gt;Ready to Wear&lt;/p&gt;         &lt;p style=" position:absolute; left:62%; margin-top:10px;"&gt;&lt;img src="images/women/women_shoes_thumb.jpg"&gt;&lt;br&gt;Shoes&lt;/p&gt;           &lt;p style=" position:absolute; left:72%; margin-top:10px;"&gt;&lt;img src="images/women/women_bags_thumb.jpg"&gt;&lt;br&gt;Bags&lt;/p&gt;');
                }
                else
                    if (this.className == 'men') {
                        $('#menBG').stop(true, true).show(5000, 'easeOutExpo');
                        $('#bgIdeas').empty();
                        $('#bgIdeas').append('&lt;p style=" position:absolute; left:20%; margin-top:10px;"&gt;&lt;img src="images/men/men_fabrics_thumb.jpg"&gt;&lt;br&gt;Fabric&lt;/p&gt;          &lt;p style=" position:absolute; left:30%; margin-top:10px;"&gt;&lt;img src="images/men/men_readytowear_thumb.jpg"&gt;&lt;br&gt;Ready to Wear&lt;/p&gt;         &lt;p style=" position:absolute; left:61%; margin-top:10px;"&gt;&lt;img src="images/men/men_shoes_thumb.jpg"&gt;&lt;br&gt;Shoes&lt;/p&gt;           &lt;p style=" position:absolute; left:71%; margin-top:10px;"&gt;&lt;img src="images/men/men_accesories_thumb.jpg"&gt;&lt;br&gt;Accessories&lt;/p&gt;');
                    }
                    else
                        if (this.className == 'kids') {
                            $('#kidsBG').stop(true, true).show(5000, 'easeOutExpo');
                            $('#bgIdeas').empty();
                            $('#bgIdeas').append('&lt;p style=" position:absolute; left:30%; margin-top:10px;"&gt;&lt;img src="images/kids/kids_readytowear_thumb.jpg"&gt;&lt;br&gt;Ready to Wear&lt;/p&gt;         &lt;p style=" position:absolute; left:40%; margin-top:10px;"&gt;&lt;img src="images/kids/kids_shoes_thumb.jpg"&gt;&lt;br&gt;Shoes&lt;/p&gt;         &lt;p style=" position:absolute; left:50%; margin-top:10px;"&gt;&lt;img src="images/kids/kids_accessories_thumb.jpg"&gt;&lt;br&gt;Accessories&lt;/p&gt;');
                        }
                        else
                            if (this.className == 'homes') {
                                $('#homesBG').stop(true, true).show(5000, 'easeOutExpo');
                                $('#bgIdeas').empty();
                                $('#bgIdeas').append('&lt;p style=" position:absolute; left:30%; margin-top:10px;"&gt;&lt;img src="images/home/bed_linen_thumb.jpg"&gt;&lt;br&gt;Bed Linen&lt;/p&gt;            &lt;p style=" position:absolute; left:40%; margin-top:10px;"&gt;&lt;img src="images/home/bed_basics_thumb.jpg"&gt;&lt;br&gt;Bed Basics&lt;/p&gt;            &lt;p style=" position:absolute; left:50%; margin-top:10px;"&gt;&lt;img src="images/home/kitchen_textile_thumb.jpg"&gt;&lt;br&gt;Kitchen Textile&lt;/p&gt;          &lt;p style=" position:absolute; left:60%; margin-top:10px;"&gt;&lt;img src="images/home/bath_thumb.jpg"&gt;&lt;br&gt;Bath Accessories&lt;/p&gt;            &lt;p style=" position:absolute; left:70%; margin-top:10px;"&gt;&lt;img src="images/home/home_accessories_thumb.jpg"&gt;&lt;br&gt;Home Accessories&lt;/p&gt;');
                            }
    }
    },
            function () {
                c = b(this);
                    $('.outerBGs').stop(true, true).hide(5000, 'easeOutExpo');
                $('#backgrounds').stop(true, true).show(1000, 'easeOutExpo');
                $('#bgIdeas').stop(true, true).animate({ bottom: '0px' }, 250, 'easeInCirc');
                c.stop(true, true).animate({ top: '0px' }, 250, 'easeInCirc');
                //            $(document).unbind('mousemove');
                //            $(document).mousemove(function (e) {
                //                var offset = $('#bgIdeas').offset();
                //                result = offset.left &lt;= e.pageX &amp;&amp; offset.left + $('#bgIdeas').outerWidth() &gt; e.pageX &amp;&amp; offset.top &lt;= e.pageY &amp;&amp; offset.top + $('#bgIdeas').outerHeight() &gt; e.pageY;
        //                //To see if mouse coordinates are under the area of div.
        //                //alert(parseInt(parseInt(offset.left) + parseInt($('#bgIdeas').outerWidth())) + '     ' + e.pageX + '         ' + parseInt(parseInt(offset.top) + parseInt($('#bgIdeas').outerHeight())) + '        ' + e.pageY);
        //                                        
        //                if (result == false) {
        //                    clearInterval(myRecFunc);
        //                    $('.bgs').show();
        //                    continueSlideShow();
        ////                    $('#bgIdeas').stop(true, true).animate({bottom: "0px"},500, "easeOutExpo", function () {$(document).unbind('mousemove');});
        ////                    c.stop(true, true).animate({top: "0px"},{ duration: 500, queue: false });

        //                    
        //                }
        //                else {
        //                }
        //            });
    });
</code></pre>

<p>The commented code above, is actually a method i tried before by mousemove event by catching the mouseposition and restricting the function from entering the code if the mouse is on the DIV, but it lead to improper functioning randomly, I guess that must have been because of binding and unbinding of event so fast. Please, I need help on this.</p>
