jQuery不会让我淡出列表项
[英]jquery won't let me fade list items
问题描述
in jquery i tried to let items in my navbar fade with query but it isn't working. 
在jQuery中，我试图让导航栏中的项目随着查询而消失，但是它不起作用。
here is my code html code. 这是我的代码html代码。
<!DOCTYPE html>
<html>
<head>
<title>TGT het Gamekanaal van Nederland</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script type="text/javascript" src="~/Desktop/sites/tigametijd site/index/script.js"></script>
</head>
<body>
<div class="banner"></div>
<div class="navbar">
<ul id="fade">
<li id="fade"><a href="index.html">Home</a></li>
<li id="fade"><a href="">Blog</a></li>
<li id="fade"><a href="../contact/contact.html">Contact ons</a></li>
<li id="fade"><a href"">Over ons</a></li>
</ul>
</div>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
<div class="footer"></div>
</body>
</html>
and here is my css code. 这是我的CSS代码。
.navbar {
height:40px;
width:900;
margin:auto;
display:block;
box-shadow: 0px 0px 5px #fff;
}
#fade
{
list-style:none;
display:inline;
padding-left:107px;
opacity:0.7;
}
and here is my script code. 这是我的脚本代码。
$(document).ready(function() {
$('.navbar').mouseenter(function() {
$('.navbar').fadeTo('fast', 1);
});
});
$(document).ready(function() {
$('.navbar').mouseleave(function() {
$('.navbar').fadeTo('fast', 0.5);
});
});
im just starting making my own website so if you see more things ive done wrong just tell me. 我刚刚开始建立自己的网站，所以如果您看到更多的错误，请告诉我。
4 个解决方案
解决方案1
2 2014-04-11 14:55:50
Demo Fiddle 演示小提琴
You dont need JS, only CSS, if I'm right in thinking what you want, you can use: 您不需要JS，仅需要CSS，如果我对您想要的东西是正确的，则可以使用：
.navbar {
height:40px;
width:900;
margin:auto;
display:block;
box-shadow: 0px 0px 5px #fff;
}
.fade {
list-style:none;
display:inline;
padding-left:107px;
opacity:0.2;
transition:opacity .5s ease-in;
}
.fade:hover {
opacity:1;
}
Also note, id attributes must be unique , you should change your HTML to: 还要注意， id属性必须是唯一的 ，您应该将HTML更改为：
<div class="banner"></div>
<div class="navbar">
<ul id="fade">
<li class="fade"><a href="index.html">Home</a>
</li>
<li class="fade"><a href="#">Blog</a>
</li>
<li class="fade"><a href="../contact/contact.html">Contact ons</a>
</li>
<li class="fade"><a href "#">Over ons</a>
</li>
</ul>
</div>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
<div class="footer"></div>
Additionally, a tags must have a valid href attribute, set to # if one isnt set. 此外， a标签必须有一个有效href属性设置为#如果心不是设置。
解决方案2
1 已采纳 2014-04-11 15:01:18
This JS should work for you. 该JS应该为您工作。 In the event functions, you'll want to use this ("The 'this' Keyword") . 在事件函数中，您需要使用this （“'this'关键字”） 。 Also, you can contain both event functions within the one doc ready container. 另外，您可以将两个事件函数包含在一个文档就绪容器中。
Hope this helps! 希望这可以帮助！
$(document).ready(function() {
$('.navbar').mouseenter(function() {
$(this).fadeTo('fast', 1);
});
$('.navbar').mouseleave(function() {
$(this).fadeTo('fast', 0.5);
});
});
UPDATE 更新
oGeez called it (and should get the upvotes, so go do it now), jQ is missing from the head. oGeez叫它（应该得到赞誉，所以现在就去做），jQ不在脑海中。 Add the jQuery library reference to your head and you should be good to go. 将jQuery库引用添加到您的头部，您应该一切顺利。 Also, you'll want to make sure it comes before your script reference, otherwise it'll bork. 另外，您将要确保它在脚本引用之前出现，否则它将变得愚蠢。
<head>
<title>TGT het Gamekanaal van Nederland</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="~/Desktop/sites/tigametijd site/index/script.js"></script>
</head>
解决方案3
0 2014-04-15 05:19:36
i made it work i had some wrong src to the libraries i have now one to google an one to the query website and it works now so thanks for you help and ogees thanks thanks thanks. 我使它工作了，我对库有一个错误的src，现在我有一个要在Google上查询的网站了，现在可以工作了，所以谢谢您的帮助，谢谢。 it was your comment that i have been searching for libraries if there is a way i can give you reputation or something tell me. 您的评论是，我一直在寻找图书馆，如果有一种方法可以给您带来声誉，还是可以告诉我。
解决方案4
-1 2014-04-11 14:58:45
Try removing second (doc).rdy? 尝试删除第二个（doc）.rdy吗？
$(document).ready(function() {
$('.navbar').mouseenter(function() {
$('.navbar').fadeTo('fast', 1);
});
$('.navbar').mouseleave(function() {
$('.navbar').fadeTo('fast', 0.5);
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.