我是一名新的 jQuery 程序员，因此非常感谢您能给我的任何帮助，我当前的元素正在尝试设计一个导航 Pane ，当将鼠标悬停在链接上时，会出现该页面的描述。继续出现的问题是描述出现在 之后 鼠标悬停在链接上，而不是同时出现。这真的开始让我烦恼，我还没有在网上找到任何东西。
这是我正在使用的 jQuery:
$( document ).ready( function() {
$( ".home" ).hover( function() {
$( ".nav-p-blurb" ).toggle( "slide" );
$( ".nav-p-blurb" ).text("This is a home page blurb and it will talk about the home page like the other blurbs will talk about their specific pages and hopefully appear correctly");
});
});
我不介意切换什么动画，任何东西都对我有用。如果您能做到，当鼠标悬停在链接上时出现文本，我将不胜感激。
这是我使用的 HTML 和 CSS:
html:
<title>website</title>
<link rel="stylesheet" href="styles/navbar.css">
<link rel="stylesheet" href="styles/index.css">
<script src="scripts/jquery.js"></script>
<script src="scripts/navbar.js"></script>
</head>
<body class="document">
<table class="nav-table">
<tr>
<td width="600" class="nav-img">
<img class="nav-img" src="img/header-img.png" width="600" height="200">
</td>
<td width="100" class="nav-links-td">
<div class="nav-links">
<div class="nav-b-div"><a href="#" class="nav-buttons home">Home</a></div>
<br>
<div class="nav-b-div"><a href="#" class="nav-buttons about">About</a></div>
<br>
<div class="nav-b-div"><a href="#" class="nav-buttons projects">Projects</a></div>
<br>
<div class="nav-b-div"><a href="#" class="nav-buttons links">Links</a></div>
</div>
</td>
<td class="nav-blurb">
<p class="nav-p-blurb"></p>
</td>
</tr>
</table>
</html>
CSS:
.document {
margin: 0px;
}
.nav-table {
left: 0px;
width: 100%;
height: 200px;
display: table;
border-collapse: collapse;
border-spacing: 0px;
border-color: gray;
}
td {
padding: 0px;
border: 0px;
}
.nav-img {
left: 0px;
width: 600px;
padding: 0px;
}
.nav-links-td {
left: 50%;
width: 100px;
}
.nav-b-div {
background: #ffffff;
width: 0px;
}
.nav-b-div {
transition: width 0.2s;
-moz-transition: width 0.2s;
-webkit-transition: width 0.2s;
-ms-transition: width 0.2s;
}
.nav-b-div:hover {
background: #efefef;
width: 100%;
}
.nav-buttons {
text-decoration: none;
color: #000000;
font-family: arial;
font-size: 16px;
padding-left: 5px;
}
.nav-blurb {
height: 100px;
background: #efefef;
overflow-x: visible;
}
.nav-p-blurb {
text-decoration: none;
color: #1C1C1C;
font-family: arial;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
position: fixed;
top: 16px;
overflow-x: visible;
}
再次感谢任何帮助，即使只是关于我的 HTML 和 CSS 的提示。
谢谢。
最佳答案
我不会为每个菜单按钮添加一个单独的函数，而是向每个 href 添加一个数据字段，其中包含要显示的文本，我将以下一种方式运行该函数:
$(".nav-buttons").hover(function () {
$(".nav-p-blurb").show();
$(".nav-p-blurb").text($(this).attr("data-mytext"));
});
使脚本更清晰，更易于在功能中概览。
查看完整的工作集:here
更新: 根据用户请求，我更新了 fiddle具有淡入/淡出效果的代码 请看下面:
$(".nav-buttons").hover(function () {
$(".nav-p-blurb").stop();
$(".nav-p-blurb").fadeTo(0,0);
$(".nav-p-blurb").text($(this).attr("data-mytext"));
$(".nav-p-blurb").fadeTo("slow",1);
});
最后更新 根据用户的要求，他会喜欢文本也像菜单一样左右滑动。请看here更新的 fiddle 。要实现类似的效果，您需要一个隐藏内容而不是动画宽度的 div。
更新
是的，可以，但是你有我自己的 3 个工作示例以及其他人的一些其他解释，所以你至少应该尝试自己弄清楚。这里没有人免费为他人编写代码，这是关于帮助和支持而不是代替您完成工作。话虽这么说，请参阅here最后一个例子。
关于javascript - jQuery中如何正确控制滑入/滑出功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21780790/