Wait 300ms and then slide down menu using jQuery
<p>I tried this js code: </p>

<pre><code>&lt;script type="text/javascript"&gt;

       $(document).ready( function() {
            var timer;
            $('.top-menu-first-ul li').hover(function(){
                        if(timer) {
                                clearTimeout(timer);
                                timer = null
                        }
                        timer = setTimeout(function() {
                                   $(this).find('ul').slideToggle(100);
                        }, 500)
            },
            // mouse out
            });
        });


&lt;/script&gt;
</code></pre>

<p>with this html:</p>

<pre><code>&lt;ul class="top-menu-first-ul"&gt;
    &lt;li&gt;
        &lt;a href="http://google.com"&gt;Google&lt;/a&gt;
        &lt;ul class="top-menu-second-ul"&gt;
            &lt;li&gt;&lt;a href="http://translate.google.com"&gt;Google Translate&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://images.google.com"&gt;Google Images&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://gmail.google.com"&gt;Gmail&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://plus.google.com"&gt;Google Plus&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="http://facebook.com"&gt;Facebook&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="http://twitter.com"&gt;Twitter&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>but it is not working.</p>

<p>I would like to show the submenu when hovering over e.g. Google link and other will appear after 300ms. </p>

<p>So, I need to prevent loading submenu when the user just quickly hover over it and not stay on hover link for at least 300ms.</p>

<p>Then I need to stop executing code (or slide up) when he leaves the link. Because if he go over and back and over and back a copule of times he stop doing hovering anfd the code is still executing itself how many times he had hover over the link. I need somehow prevent this to happen.</p>

<p>EDIT: I need to solve this without plugins like hoverIntent etc. if possible, just plain javascript and jQuery</p>
