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>

所以...我试图稍微清理一下我的项目并且有一个想要解决问题的问题。我有一个div，当它悬停在上面时，向下滑动以显示一个站点导航菜单，并在移出div时向上滑动。它运作良好，但我唯一的问题是，如果我将鼠标悬停在div上，让它开始向下滑动，然后退出然后重新进入div，当它向后滑动时，否则隐藏的菜单会显示，直到排队的jquery操作完成。这是我的jsFiddle。代码看起来有点毛茸茸，但你会明白的。我已经删除了尽可能多的代码，因此您无需花太多钱来查找项目。

我正在使用jQuery 1.9.1。理想情况下，我希望看到的是菜单从滑动向下滑动而不完全完成滑动功能。有什么想法吗？

Answer 1

扩展和收缩div的代码如下:(在jsFiddle的html部分中找到）

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

让我们分析一下这段代码：

如果我们hover超过li.dropdown，那么

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

如果我们hover li.dropdown，那么

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

因此，代码不包含'嵌套'动画。

有很多方法可以解决这个问题，但我认为最美妙的方法是：

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

您可以在this jsFiddle找到一个有效的例子。

我希望能回答你的问题。

在幻灯片中间恢复滑行

1 个答案: