jquery fadein和fadeout [英] jquery fadein and fadeout
本文介绍了jquery fadein和fadeout的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
i制作导航菜单，所有代码都列在下面，当鼠标悬停在菜单上时，列表会淡化，但突然淡出为什么？任何人都可以解决它，
< pre lang =HTML>
< ！doctype html >
< html lang = zh >
< head >
< meta charset = UTF-8 < span class =code-keyword>>
< title > 索引< / title >
< link rel = stylesheet href = style .css >
< script src = jquery.js > < / script >
< script src = http://code.jquery.com/jquery-1.10.1.min .js > < /脚本 >
< script src = http://code.jquery.com/jquery-migrate-1.2.1.min.js > < / script >
< script > ;
$（document）.ready（function（$）{
$（'＃con'）。addClass（'con'）;
$（'＃sub1'）。hide（）;
$（'＃book'）。hover（function（）{
/ *当鼠标进入元素时要做的事情* /
$（'＃sub1'）。fadeIn（' slow'）;
}，function（）{
/ *当鼠标离开元素时要做的事情* /
$（'＃sub1'）。fadeOut（'slow'）;
}）;
}）;
< / script >
< / head >
< body >
< div id = con >
< ul class = main_menue id < span class =code-keyword> = main >
< li > < a href = ＃ > 主页< / a > ; < / li >
< li > < a href = ＃ id = book > 图书< / a >
< ul class = sub_menue id = sub1 >
< li > < a href = ＃ > C ++ < / a > < / li >
< li < span class =code-keyword>> < a href = ＃ > Java < / a > < / li >
< li > < a href = ＃ > Php < < span class =code-leadattribute> / a > < / li >
< < span class =code-leadattribute> li > < a href = ＃ > VB < / a > < ; / li >
< li > < a href = ＃ > C＃< / a > < / li >
< span class =code-keyword>< / ul >
< / li >
< li > < a href = ＃ id = tut > 教程< / a >
< ul class = sub_menue id = sub2 >
< li > < a href = ＃ > C ++ < / a > < / li < span class =code-keyword>>
< li > < a href = ＃ > Java < / a > < / li >
< li > < a href = ＃ > Php < / a > < / li >
< li > < a href = ＃ > VB < / a > < / li >
< li > < a href = ＃ > C＃< / a > < span class =code-keyword>< / li >
< / ul >
< / li >
< li > < a href = ＃ > 关于我们< / a > < / li >
< li > < a href = ＃ > 与我们联系< / a > < / li >
< / ul >
< / div >
< / body >
< / html >
< pre lang =css> body
{
保证金 ： 0px;
填充 ： 0px;
max-width ： 100％;
max-height ： 100％;
< span class =code-attribute> background-color ： silver;
颜色 ： white;
}
header
{
margin-top ： -20px;
width ： 100％;
height < span class =code-keyword>： 20％;
background ： 灰色;
}
。 con
{
background ： red;
}
。 main_menue ul
{
颜色 ： 白色;
位置 ： 绝对;
margin ： 0px;
padding ： 0px;
list-style-type ： 无;
}
。 main_menue li
{
float ： left;
display ： 内联;
padding ： 50px;
margin ： 0px;
text-align ： center;
}
。 main_menue li a
{
display ： inline-block;
text-decoration ： 无;
颜色 ： black;
}
。 main_menue li 。 sub_menue
{
position ： 绝对值;
}
。 sub_menue u l
{
margin ： 0px;
padding ： 0px;
list-style-type ： none;
}
。 sub_menue li
{
width ： 100px;
text-align ： < span class =code-keyword> left;
display ： < span class =code-keyword> inherit;
float ： <小号pan class =code-keyword> none;
margin ： < span class =code-keyword> 0px;
padding ： < span class =code-keyword> 0px;
background-color ： 灰色;
溢出 ： 隐藏;
}
。 sub_menue li a
{
padding-top ： 2px;
margin ： 0px;
text-decoration ： none;
颜色 ： black;
}
。 sub_menue li a：hover
{
background-repeat ： no-repeat;
display ： 阻止;
background-color ： black;
color ： white;
}
。 main_menue li：hover 。 sub_menue
{
位置 ： 绝对;
< span class =code-attribute> display ： block;
}
页脚
{
margin-top < span class =code-keyword>： 600px;
width < span class =code-keyword>： 100％;
height ： 20％;
background ： 灰色;
}
解决方案
（document）.ready（function（
）{
（'＃con'）。addClass （ 'CON'）;
HY!
i make the navigation menue, all the code are listed below, when the mouse hover on the menue then the list will fadein but suddenly it fade out why? can any one fix it,
<pre lang="HTML">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function($) {
$('#con').addClass('con');
$('#sub1').hide();
$('#book').hover(function() {
/* Stuff to do when the mouse enters the element */
$('#sub1').fadeIn('slow');
}, function() {
/* Stuff to do when the mouse leaves the element */
$('#sub1').fadeOut('slow');
});
});
</script>
</head>
<body>
<div id="con">
<ul class="main_menue" id="main">
<li><a href="#">Home</a></li>
<li><a href="#" id="book">Books</a>
<ul class="sub_menue" id="sub1">
<li><a href="#">C++</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">V.B</a></li>
<li><a href="#">C#</a></li>
</ul>
</li>
<li><a href="#" id="tut">Tutorials</a>
<ul class="sub_menue" id="sub2">
<li><a href="#">C++</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">V.B</a></li>
<li><a href="#">C#</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
<pre lang="css">body
{
margin: 0px;
padding: 0px;
max-width: 100%;
max-height: 100%;
background-color: silver;
color: white;
}
header
{
margin-top: -20px;
width: 100%;
height: 20%;
background: gray;
}
.con
{
background: red;
}
.main_menue ul
{
color: white;
position: absolute;
margin:0px;
padding:0px;
list-style-type: none;
}
.main_menue li
{
float: left;
display: inline;
padding:50px;
margin: 0px;
text-align: center;
}
.main_menue li a
{
display: inline-block;
text-decoration: none;
color: black;
}
.main_menue li .sub_menue
{
position: absolute;
}
.sub_menue ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.sub_menue li
{
width: 100px;
text-align: left;
display: inherit;
float: none;
margin: 0px;
padding: 0px;
background-color: gray;
overflow: hidden;
}
.sub_menue li a
{
padding-top:2px;
margin: 0px;
text-decoration: none;
color: black;
}
.sub_menue li a:hover
{
background-repeat: no-repeat;
display: block;
background-color:black;
color: white;
}
.main_menue li:hover .sub_menue
{
position: absolute;
display:block;
}
footer
{
margin-top: 600px;
width: 100%;
height: 20%;
background: gray;
} 解决方案
(document).ready(function(
) {
('#con').addClass('con');
这篇关于jquery fadein和fadeout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
