[英]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.