Question

在jquery中，我试图让导航栏中的项目随查询淡出，但它无法正常工作。

这是我的代码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>

这是我的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;
}

这是我的脚本代码。

$(document).ready(function() {
$('.navbar').mouseenter(function() {
    $('.navbar').fadeTo('fast', 1);
});
});

$(document).ready(function() {
$('.navbar').mouseleave(function() {
    $('.navbar').fadeTo('fast', 0.5);
});
});

我刚开始创建自己的网站，所以如果你看到更多我做错了的事情就告诉我。

Answer 1

Demo Fiddle

你不需要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;
}

另请注意，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>

此外，a代码必须具有有效的href属性，如果未设置，则设置为#。

Answer 2

这个JS应该适合你。在事件函数中，您将要使用此("The 'this' Keyword")。此外，您可以在一个doc ready容器中包含两个事件函数。

Fiddle Demo

希望这有帮助！

$(document).ready(function() {
    $('.navbar').mouseenter(function() {
        $(this).fadeTo('fast', 1);
    });

    $('.navbar').mouseleave(function() {
        $(this).fadeTo('fast', 0.5);
    });
});

<强>更新

oGeez 调用它（并且应该得到upvotes，所以现在去做），jQ从头部缺失。将jQuery库引用添加到您的头部，您应该很高兴。此外，您需要确保它在您的脚本引用之前，否则它将是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>

Answer 3

我使它工作我有一些错误的src到库我现在有一个谷歌一个到查询网站，它现在工作，所以感谢你的帮助和ogees谢谢谢谢。是你的评论我一直在寻找图书馆，如果有办法，我可以给你声誉或告诉我。

Answer 4

尝试删除第二个（doc）.rdy？

$(document).ready(function() {
$('.navbar').mouseenter(function() {
$('.navbar').fadeTo('fast', 1);
});
$('.navbar').mouseleave(function() {
$('.navbar').fadeTo('fast', 0.5);
});
});

jquery不让我淡化列表项

4 个答案:

Demo Fiddle