jquery悬停导航按钮，淡入另一个div上的div
很少卡在这个 jquery 上。
我的导航栏上方有一个横幅，它是一个列表。理想情况下，当我将鼠标悬停在导航栏中的 li 上时，我希望“标题”滑入横幅 div 的顶部。
我猜想是这样的：
<div id="banner">
<div class="home_caption">This is Home!</div>
<div class="about_caption">This is About!</div>
</div>
<div id="navbar">
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">About</a></li>
</ul>
</div>
所以如果我将鼠标悬停在“home”上，“home_caption”DIV 将滑入“banner”div 顶部查看。
jquery：
$(document).ready(function(){
$('#home').hover(function(){
$(".home_caption", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".home_caption", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
});
我查看了 https://buildinternet.s3。 amazonaws.com/live-tutorials/sliding-boxes/index.htm 但不确定它是否适合我的需求 - 即“悬停”区域位于“标题”区域之外。
谢谢
little stuck on this jquery.
I have a banner above my nav bar, which is a list. Ideally, when I hover over a li in the navbar, I would like a "caption" to slide in on top of the banner div.
I guess something like:
<div id="banner">
<div class="home_caption">This is Home!</div>
<div class="about_caption">This is About!</div>
</div>
<div id="navbar">
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">About</a></li>
</ul>
</div>
so if i hover over "home", the "home_caption" DIV will slide in to view on top of "banner" div.
jquery:
$(document).ready(function(){
$('#home').hover(function(){
$(".home_caption", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".home_caption", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
});
i have looked at https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm but not sure if its adaptable to my needs - i.e the "hover" area is outside of the "caption" area.
thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
本教程应该可以帮助您。
参见 5a：
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for -designers/
http://www.webdesignerwall.com/demo /jquery/animated-hover1.html
This tutorial should help you out.
See 5a:
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
http://www.webdesignerwall.com/demo/jquery/animated-hover1.html
如果您想使用您的代码，那么您需要放入
标题类。
有一个很好的 jQuery 效果，允许您显示或隐藏元素。它称为切换。最终代码应该类似于：
If you want to use your code then you need to put
in the caption classes.
There's a nice jQuery effect that allows you to show or hide an element. It's called toggle. Final code should look something like:
我认为将
$(".home_caption", this)更改为$(".home_caption")可能会解决此问题。我还没有在您的具体示例上对其进行测试，因此可能存在其他问题，但就目前情况而言，它正在 #home 中搜索 .home_caption （如此所指）。I think changing
$(".home_caption", this)to just$(".home_caption")may fix this. I haven't tested it on your specific example, so there may be other problems, but as it stands it is searching for .home_caption within #home (as referred to by this).