.动画问题/帮助答案

【问题标题】：.animate question/help.动画问题/帮助
【发布时间】：2011-02-02 03:28:21
【问题描述】：

所以，到目前为止，我已经构建了这个导航栏，我很好奇它是否有可能实现我的想法。目前，当您将鼠标悬停在每个链接上时，它们会下拉（填充增加）。

现在，我很好奇的是，如果您将鼠标悬停在“test1”上，test2-4 也会随之下降，但在从下拉菜单创建的填充中，“test1”信息会显示出来。允许用户单击或阅读其中的任何信息。此外，如果用户愿意，他们可以将鼠标移到 test2 上，然后一切都会动画（不透明度，我认为我可以这样做）到 test2 字段中的任何内容，test3 做同样的事情等等。

我在这方面没有取得太大的成功，我之前创建了一个完全独立的面板，但这并不完全有效，或者我做得不正确。

这是我一直在做的工作，任何帮助将不胜感激！谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() { 
$("#nav li > a").hover(function() {
$(this).stop().animate({paddingTop: "100px"}, 100);
}, 
function() {
$(this).stop().animate({paddingTop: "10px"}, 200);  
});
});
</script>

<style type="text/css"> 
#nav
{
position: absolute;
top: 0;
left: 60px;
padding: 0;
margin: 0;
list-style: none;
}

#nav li
{
display: inline;
}

#nav li a
{
float: left;
display: block;
color: #555;
text-decoration: none;
padding: 10px 30px;
background-color: #d1d1d1;
border-top: none;
}
</style>

</head>

<body>

<div id="wrap">

<ul id="nav">
    <li><a href="">test1</a></li>
    <li><a href="">test2</a></li>
    <li><a href="">test3</a></li>
    <li><a href="">test4</a></li>

</ul>
</div>
</body>
</html>

【问题讨论】：

标签： jquery navigation hover jquery-animate slide

【解决方案1】：

我弄乱了你的代码，但没有得到完整的答案，但我想我还是会发布我所拥有的。此代码将在菜单上方添加一个 div，并使用它来显示 <a> 特定内容。我在您的 <a> 标签中添加了 ID，因为您在确定要显示的内容时需要一些方法来识别它们。我不认为你真的应该在ul 中添加div 标签，所以这并不完美。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript"> 
$(function() {  
    $('#content').height(0);
    $("#nav li > a").hover(function() { 
            var id = $(this)[0].id;
            var content = 'Default content';
            if (id == '1')
                content = 'Test 1 content';
            else if (id == '2')
                content = 'Test 2 content';
            else if (id == '3')
                content = 'Test 3 content';
            else if (id == '4')
                content = 'Test 4 content';

            $('#content').html(content);
        },  
        function() { }
    ); 

    $("#nav").hover(function() { 
            $('#content').stop().animate({height: "100px"}, 100);
        },  
        function() { 
            $('#content').html('').stop().animate({height: "0"}, 200);  
        }
    ); 

});

</script> 

<style type="text/css">  
#nav 
{ 
position: absolute; 
top: 0; 
left: 60px; 
padding: 0; 
margin: 0; 
list-style: none; 
} 

#nav li 
{ 
display: inline; 
} 

#nav li a 
{ 
float: left; 
display: block; 
color: #555; 
text-decoration: none; 
padding: 10px 30px; 
background-color: #d1d1d1; 
border-top: none; 
} 

div#content
{
    border: 1px solid red;
    background-color: #d1d1d1;
    width: 355px;
}
</style> 

</head> 

<body> 

<div id="wrap"> 
<ul id="nav"> 
    <div id="content"></div>
    <li><a id="1" href="">test1</a></li> 
    <li><a id="2" href="">test2</a></li> 
    <li><a id="3" href="">test3</a></li> 
    <li><a id="4" href="">test4</a></li>
</ul> 
</div> 
</body> 
</html>

然后我认为您的意思是您希望您的链接特定内容在您悬停时直接显示在您的链接上，并想出了一些不同的东西。您可以使用 jQuery 的 prepend 将特定内容添加到“填充”区域。使用此解决方案，您不需要a 标签中的ID，但整个菜单不会在悬停时下拉（但它可能会以某种方式被卡在那里，稍后可能会回到它）。要查看它，只需将您的 jQuery 代码更改为：

$(function() {  
    $("#nav li > a").hover(function() { 
        $(this).stop().animate({paddingTop: "100px"}, 100); 
        $(this).prepend('<div id="paddingMenu"><p>test1 link</p><p>test1 link2</p></div>');
    },  
    function() { 
        $(this).stop().animate({paddingTop: "10px"}, 200);
        $('#paddingMenu').remove();
    }); 

});

我希望这能提供一些帮助。祝你好运！

编辑：当然，jQuery 的 html 方法将设置从其选择器返回的元素的 innerHTML。所以在第一个例子中，content 变量可以包含任何你想用作链接的a 标签。这是一个为 test1 的内容创建几个链接的示例：

$("#nav li > a").hover(function() { 
        var id = $(this)[0].id;
        var content = 'Default content';
        if (id == '1')
            content = '<a href="http://google.com">Google<a><br />' +
              '<a href="http://stackoverflow.com/">Stackoverflow</a>';
        else if (id == '2')
            content = 'Test 2 content';
        else if (id == '3')
            content = 'Test 3 content';
        else if (id == '4')
            content = 'Test 4 content';

        $('#content').html(content);
    },  
    function() { }
);

【讨论】：

天哪，是的！第一个例子几乎正是我想要做的！我像之前提到的那样通过悬停/侧面实现了这一点，但这并没有削减它，我觉得我非常接近通过动画解决这个问题，但无法完全完成。非常感谢！谢谢谢谢！
实际上，我有一个后续问题（希望您查看）。假设我想让这些下拉列表的内容中包含链接。我怎么能做到这一点？可能吗？并非每个下拉菜单都有内容所在的链接，但我设想其中至少有两个只是严格意义上的链接。
@Josh - 更新了链接示例。