使用 jQuery 动画下拉菜单

Question

我想为我的顶部导航设置动画。

目前下拉次只是跳下悬停顶部导航链接。

开发网站：http://goandco.w7.ext.starberry.com

我尝试了以下方法：

<script>
jQuery(document).ready(function() {
    jQuery( '.has-drop-down-a' ).hover(
        function(){
            jQuery(this).children('.drop').slideDown(200);
        },
        function(){
            jQuery(this).children('.drop').slideUp(200);
        }
    );
});
</script>

我的html类似如下：

<ul id="nav">
   <li class="has-drop-down">
     <a href="#" class="has-drop-down-a">Search</a>
       <div class="drop">...</div>
   </li>
</ul>

我需要class=“drop”div以动画向下，而不是瞬间。

编辑：

所以，以下是有效的 - 除了两件事： 1）您必须将鼠标悬停在链接上一次，然后它就会起作用。 2）当您将鼠标向下移动到放置 div 上时，它会折叠

 <script>
        jQuery('body').ready(function() {
            jQuery( '.has-drop-down-a' ).hover(
                function(){
                    jQuery(this).siblings('.drop').slideDown(400);
                },
                function(){
                    jQuery(this).siblings('.drop').slideUp(400);
                }
            );
        });
        </script>

Answer 1

如果您查看http://api.jquery.com/slidedown/ 的网站文档 在 1.4.3 版本中，您可以向函数添加更多内容。而不是：

jQuery(this).children('.drop').slideDown(200);

您可以添加更多变量：

jQuery(this).children('.drop').slideDown( [duration ] [, easing ] [, complete ] )

Answer 2

我在您的代码中看到的唯一问题是不要在“a”中包含“div drop”。

以下应该有效：

<ul id="nav">
    <li class="has-drop-down">
        <a href="#" class="has-drop-down-a">Search
            <div class="drop">...</div>
        </a>
    </li>
</ul>

小提琴：http://jsfiddle.net/61ewuhea/

编辑：

关于这两个问题：

1)你必须将drop的初始状态设置为折叠，要做到这一点，添加

$('.drop').slideUp(0);

到文档准备函数。

2) 要解决这个问题，我强烈建议您听从我的建议，将 'div' 放在 'a' 内，并使用孩子而不是兄弟姐妹。

为什么？因为，与您提供的网站不同，您需要动画，因此，您应该尝试仅“动画”一个对象。这就是它崩溃的原因，你说的是“当我悬停'a'而不是'div'时动画”。

当您将 div 放在 INSIDE 内时，它不再折叠，因为它是同一个元素。

在做 jsFiddle 时出现的另一个问题是，您需要一个“桥”将“a”元素连接到“div”来执行此操作，我只是在 .drop 类中添加了一些 css 规则。

这里是完整的 javascript 代码：

jQuery('body').ready(function () {
    $('.drop').slideUp(0);

    jQuery('.has-drop-down-a').hover(
        function () {
            jQuery(this).children('.drop').slideDown(200);
        },

        function () {
            jQuery(this).children('.drop').slideUp(200);
        }
    );
});

这是 HTML：

<ul id="nav">
    <li class="has-drop-down"> <a href="#" class="has-drop-down-a">
            Search
            <div class="drop">...</div>
        </a>

    </li>
</ul>

这是 CSS：

.drop {
    background-color:#f00;
    position:relative;
    top:-1px;
}

您可以在这里测试 jsFiddle：http://jsfiddle.net/61ewuhea/1/

我希望这能正确回答您的问题。