如何正确控制jQuery中的滑入/滑出功能？
[英]How do I correctly control the slide in/out function in jQuery?
问题描述
I am a new jQuery programmer so any help you can give me will be mightily appreciated, my current project is trying to design a navigation pane that, when a link is hovered over, a description of that page appears. 
我是一名新的jQuery程序员，所以您能提供的任何帮助将不胜感激，我当前的项目正在尝试设计一个导航窗格，当链接悬停在导航窗格上时，将显示该页面的描述。 The problem that continues to occur is that the description appears after the link has been moused over, not whilst. 继续出现的问题是，在鼠标悬停在链接上之后而不是在链接出现之后才出现描述。 This is really starting to annoy me, and I haven't found anything on the web yet. 这真的开始让我很烦，而且我还没有在网上找到任何东西。
This is the jQuery I am using: 这是我正在使用的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");
});
});
I don't mind what animation is toggled, anything will work just as well for me. 我不在乎切换哪个动画，任何事情对我来说都一样。 If you can just make it so that the text appears whilst the link is being moused over I would really appreciate it. 如果你可以让这个出现的文字，而该链接被鼠标滑过我真的很感激它。
Here is the HTML and CSS I am using: 这是我正在使用的HTML和CSS：
html: 的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: 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;
}
Once again, I will appreciate any help, even if only tips for my HTML and CSS. 再次，我将不胜感激，即使只是有关HTML和CSS的提示，也能提供帮助。
Thankyou. 谢谢。
4 个解决方案
解决方案1
2 已采纳 2014-02-14 14:32:45
Instead of adding a separate function for each menu button I will add a data field to each href, which contains the text to be displayed and I will run the function in the next way: 我不会为每个菜单按钮添加单独的功能，而是向每个href添加一个数据字段，其中包含要显示的文本，并且我将以以下方式运行该功能：
$(".nav-buttons").hover(function () {
$(".nav-p-blurb").show();
$(".nav-p-blurb").text($(this).attr("data-mytext"));
});
Keeps the script more clear and easier to overview in feature. 使脚本更清晰，更易于概述。
See a full set working set: here 查看全套工作集： 此处
UPDATE: Based on user request I have updated the fiddle code with a fadeIn / Out effect Please see below: 更新：根据用户请求，我用fadeIn / Out效果更新了小提琴代码，请参见以下内容：
$(".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);
});
LAST UPDATE As user requested, he will like the text to also slide left-right same way as the menu. 最后更新根据用户要求，他希望文本也与菜单一样左右滑动。 Please see here the updated fiddle. 请在这里查看更新的小提琴。 To do a similar effect you will need a div which hides the content than the width is animated. 要实现类似的效果，您将需要一个div，该div会隐藏内容而不是动画宽度。
UPDATE 更新
Yes it can, but you have 3 working examples from myself and some other explanation from others as well, so you should at least try to figure it out on your own. 是的，可以，但是您自己有3个工作示例，其他人也有一些其他解释，因此您至少应该尝试自己解决问题。 Nobody here is writing code for free for others, it's about help and support not about doing the job instead of you. 这里没有人为他人免费编写代码，这是关于帮助和支持而不是代替您完成工作。 This being said, see here the last example. 话虽如此，请参见此处的最后一个示例。
解决方案2
1 2014-02-14 13:49:29
the hover method in jquery usually needs 2 handlers, one for mouseIn , and one for mouseOut . jQuery中的hover方法通常需要2个处理程序，一个用于mouseIn ，一个用于mouseOut 。 I've modified your code a little bit to include both handlers. 我对您的代码做了一些修改，以包括两个处理程序。
Here is a working fiddle: fiddle 这里是工作提琴： 小提琴
Is this what you are looking for ? 这是你想要的 ？
解决方案3
1 2014-02-14 13:53:12
May be this: 可能是这样的：
$(".home").hover(
function () {
$(".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").show();
}, function() {
$(".nav-p-blurb").hide().text("");
}
);
解决方案4
1 2014-02-14 14:06:12
Changes to HTML: 对HTML的更改：
<td class="nav-blurb">
<!-- add this to your html to make td visible -->
<p class="nav-p-blurb"></p>
</td>
Changes to CSS: 对CSS的更改：
.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;
display:none; /* make p invisible */
}
Changes to JS: 对JS的更改：
$( document ).ready( function() {
$( ".home" ).hover(
function() {
$( ".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");
$( ".nav-p-blurb" ).fadeIn( 1000 );
}, function() {
$(".nav-p-blurb").hide().text("");
}
);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.