Stop jQuery slideUp slideDown madness!

Ever made a jquery slider only to find that when you mouse over your menu items quickly you need to wait until it all catches up with itself? you need to .stop()!

<ul id="nav">
<a href="/about/opening-times">About Us</a>
<ul class="submenu" style="display: none;">
<li><a href="/about/opening-times">Opening Times</a></li>
<li><a href="/about/key-people">Key People</a></li>
<li><a href="/about/awards">Awards</a></li>
<a href="/our-tea/list">Our Tea</a>
<ul class="submenu" style="display: none;">
<li><a href="/our-tea/list">List of our teas</a></li>
<li><a href="/our-tea/tea-guild">Information on the tea guild</a></li>
<li><a href="/our-tea/info">Information on purchase of tea</a></li>
<li><a href="/menus">Menus</a></li>
<a href="/afternoon-tea/history">Afternoon Tea</a>
<ul class="submenu" style="display: none;">
<li><a href="/afternoon-tea/history">History of afternoon tea</a></li>
<li><a href="/afternoon-tea/our-offerings">Our offerings</a></li>
<li><a href="/afternoon-tea/menus">Menus</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/gallery">Gallery</a></li>
<li><a href="/private-hire">Private Hire</a></li>
<li><a href="/testimonials">Testimonials</a></li>
<script type="text/javascript">
$('ul#nav li').hover(function()
$(this).find('ul.submenu').stop(true, true).slideDown('slow'); }, 
function() {$(this).parent().find('ul.submenu').stop(true, true).slideUp('slow');

And that should take care of it!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s