Resuming slidedown in middle of slideup

Question

<div id="nav" class="roundbox">
    <ul class="dropdown">
        <li class="dropdown"> <a href="#" class="dropdown-toggle">
            <div class="dashdiv">
            <label>
                <p align="center" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px;" class="dash">&#9733;&#9733;&#9733;</p>
            </label>
            </div>
        </a>

            <ul class="dropdown-menu">
                <li class="t stuff"> <a href="#">Main</a>

                </li>
                <li class="e stuff"> <a href="#">News</a>

                </li>
                <li class="t stuff"> <a href="#">History</a>

                </li>
                <li class="e stuff"> <a href="#">Contact</a>

                </li>
                <li class="t"></li>
                <li class="e stuff"> <a href="http://www.graceland.edu" target="_blank">GU Site</a>

                </li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
            </ul>
            <div class="footdiv">
                <p class="foot1" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px;"> <span class="time" style="vertical-align: middle;"></span>

                </p>
                <p class="foot" style="margin-top: 0px; margin-bottom: 0px;"> <span class="date"></span>

                </p>
            </div>
        </li>
    </ul>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $('li.dropdown').hover(
            function()
    {
            $(this).find('ul').stop().slideDown(2000);
        },
        function()
    {
            $(this).find('ul').stop().slideUp(2000);
        }
        )
</script>
</div>

So... I am attempting to clean up my project a bit and have an issue that would like a resolution. I have a div which, when hovered over, slides down to display a site navigation menu and slides up when moving out of the div. It works well, but my only qualm I have with it is that if I hover over the div, let it begin sliding down, then exit and then re-enter the div while it is sliding back up, the otherwise hidden menu displays until the queued jquery operation finishes. Here is my jsFiddle. The code looks a bit hairy, but you'll get the idea. I've removed as much code as I can so you don't have to dig too much to find items.

I'm using jQuery 1.9.1. Ideally, what I'd like to see is for the menu to go from sliding up to sliding back down without fully completing the slideup function. Any ideas?

Answer 1

The code that expands and contracts the div is the following: (found in html part of jsFiddle)

<script>
$('li.dropdown').hover(
        function()
        {
            $(this).find('ul').stop().slideDown(2000);
        },
        function()
        {
            $(this).find('ul').stop().slideUp(2000);
        })
</script>

Let's analyze this code a bit:

If we hover over li.dropdown, then

function(){ $(this).find('ul').stop().slideDown(2000);  } //Will execute.

If we hover out of li.dropdown, then

function(){ $(this).find('ul').stop().slideUp(2000); } //Will execute

Hence, the code does not cover 'nested' animations.

There are many ways to solve this problem but I think the most beautiful one would be:

  <script>
      $('li.dropdown').hover(function()
      {
         $(this).find('ul').stop().slideToggle(2000);
      });
  </script>

You can find a working example in this jsFiddle.

I hope that answers your question.