javascript - 下拉菜单上的 slideDown

Question

我想在我的页面上执行此操作（photoshop 图片）：

在悬停时（在 ACTORS 链接上），我希望黄色下拉列表（Fotis J.Colakides 等所在的位置）缓慢显示。从上到下。

我不知道在我的页面上执行此操作的最佳方法是什么。

当然我必须使用这样的无序列表（）：

    <ul id="showInfoNav">
        <li><a class="slideBtn" href="#">MEDIA</a>
            <ul class="slideShow">
                <li>assa</li>
            </ul>
        </li>
        <li><a class="slideBtn" href="#">ACTORS</a>
            <ul class="slideShow">
                <li><a href="#" onclick="javascript:getSummary(1)">ACTOR1</a></li>
                <li><a href="#" onclick="javascript:getSummary(2)">ACTOR2</a></li>
            </ul>
        </li>
    </ul>

[更新]

直到现在我已经这样做了：（http://jsfiddle.net/bMGhC/）

但我是从 css 做的。我有左边：-9999px；在悬停时我在左边：0px;

我想做它向下滑动。但它不起作用。

这是我的CSS：

ul#showInfoNav 
    {
        list-style:none;
        float:left;
        width:100%;
    }

    ul#showInfoNav li
    {
        float:left;
        margin-right:50px;
        position:relative;
    }

    ul#showInfoNav a.slideBtn
    {
        padding:5px;
        display:block;
        text-decoration:none; 
    }
    ul#showInfoNav ul a:hover{
        color:#898989;
    }
    /*--- DROPDOWN ---*/
    ul#showInfoNav ul
    {
        background-color:#F4F9B6;
        padding:50px 10px 10px 10px;
        list-style:none;
        left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
        position: absolute;
        top:-20px;
        /*z-index:-1;*/
    }
    ul#showInfoNav ul li
    {

        float:none;
    }
    ul#showInfoNav ul a{
        white-space:nowrap; 
    }

    ul#showInfoNav li:hover ul{ /* Display the dropdown on hover */
        left:0; /* Bring back on-screen when needed */
    }

我也有这个 z-index 问题。如果我将它设置为 -1，它也会隐藏在图像后面。

Answer 1

查看 jQuery UI 效果，特别是 slide()：

http://docs.jquery.com/UI/Effects/Slide

Answer 2

您还可以查看slideToggle()jQuery 提供的方法。

请参阅此处的示例。

类似的功能是slideUp()，slideDown()而且更通用的是，animate()

Answer 3

看看.hover()， 和.slideUp/Down()。如果您想要更“永久”的状态，也可以在以下代码中替换.hover为。.toggle两者的关键是利用它们的回调函数。

HTML

<a href="#">Click to see a list</a>
<ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
</ul>

jQuery

$('ul').hide(); // doing this rather than via CSS for a fail-safe for JS
$('a').hover(function() {
    $('ul').slideDown('fast');
    }, function() {
    $('ul').slideUp('slow')
})​

Answer 4

使用 jQuery fadeIn() 时，您也可以指定持续时间。一些简单的示例是：

1. 给 li 的一些 id 或 class ( <li id="actor1">soemthing</li>)

2. 在 JS 文件或脚本标签中使用：

   $("#actor1).hover(function(){ $(this).slideDown('slow')}, function(){ $(this).slideUp('slow') });

编辑：我看到你想要一个滑动效果，所以我将fadeIn()and更改fadeOut()为slideDown()and slideUp()。你可以在这里阅读他们的文档

Answer 5

这是我找到的解决方案，我使用它是因为我不想在他的标签<ul>之间导航时滑动。<li>

    $('ul.slideShow').hide();
    $("#showInfoNav li").click(function () {
        $(this).find('ul.slideShow').slideDown('fast').show();
        $(this).hover(function () {   // PARENT

        }, function () {
            $(this).parent().find("ul.slideShow").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up 
        });

    });