[英]How do I correctly control the slide in/out function in jQuery?
我是一名新的jQuery程序员，所以您能提供的任何帮助将不胜感激，我当前的项目正在尝试设计一个导航窗格，当链接悬停在导航窗格上时，将显示该页面的描述。 继续出现的问题是，在鼠标悬停在链接上之后而不是在链接出现之后才出现描述。 这真的开始让我很烦，而且我还没有在网上找到任何东西。
这是我正在使用的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"));
});
使脚本更清晰，更易于概述。
查看全套工作集： 此处
更新：根据用户请求，我用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);
});
最后更新根据用户要求，他希望文本也与菜单一样左右滑动。 请在这里查看更新的小提琴。 要实现类似的效果，您将需要一个div，该div会隐藏内容而不是动画宽度。
更新
是的，可以，但是您自己有3个工作示例，其他人也有一些其他解释，因此您至少应该尝试自己解决问题。 这里没有人为他人免费编写代码，这是关于帮助和支持而不是代替您完成工作。 话虽如此，请参见此处的最后一个示例。
可能是这样的：
$(".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("");
}
);
对HTML的更改：
<td class="nav-blurb">
<!-- add this to your html to make td visible -->
<p class="nav-p-blurb"></p>
</td>
对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 */
}
对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("");
}
);
});
我如何获得一个垂直菜单以与我的jQuery移动面板一起滑出？
[英]How do i get a vertical menu to slide out with my jquery mobile panel?
如何确保在其他幻灯片功能完成之前，不会发生其他javascript / jQuery函数？
[英]How do I ensure that no other javascript/jQuery function doesn't happen until the other slide functions complete?
如何在jQuery Galleria中滑动带有其内部元素的div？
[英]How do I slide a div in jquery galleria with elements inside it?
如何使用Jquery Mobile Slide Panel从底部向上滑动？
[英]How do I use Jquery Mobile Slide Panel to slide up from the bottom?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.