0

我对 HTML/CSS/jQuery 比较陌生，所以请原谅我的问题的简单性。

我正在尝试为我正在制作的网站创建一个导航栏。然而，我遇到了一个恼人的障碍：jQuery 没有做我认为应该做的事情。我试图得到它，以便当我将鼠标悬停在链接上时，链接的文本从 0.75 不透明度变为 1.0 不透明度。我尝试使用 .fadeTo() 标签，但是当我将鼠标悬停在链接上时，什么也没有发生；它只是保持在 0.75 的不透明度。什么是让我的 jQuery 代码做我想做的事的好方法？这是我目前拥有的 HTML、CSS 和 jQuery 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="home_stylesheet.css" />
<link type="text/javascript" href="home_animation.js" />
<title>Untitled Document</title>
</head>

<body>
    <div id="container">
    <div id="navbar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Research Topics</a></li>
        <li><a href="#">Publications</a></li>
        <li><a href="#">Graduate Students</a></li>
        <li><a href="#">Visiting Scholars</a></li>
      </ul>
    </div>
  </div>
</body>
</html>



body {
background-image:url('assets/starry_night.jpg');
color:#000;
font-family:"Times New Roman", Times, serif;
font-size:18px;
}

#container, #container div {
background-color:#FFF;
width:700px;
height:1000px;
margin:5px auto;
opacity:0.85;
}

/**********Navbar Styling**********/

#navbar ul {
list-style-type:none;
margin:0;
padding:0;
}

#navbar li {
display:inline;
}

#navbar a {
text-decoration:none;
padding:6px;
color:#000;
text-align:center;
opacity:0.75;
};



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

谢谢您的帮助！

4

1 回答 1

0

.hover()并且.animate()是你所追求的：

$("#navbar a").hover(
    function() {
        $(this).stop().animate({"opacity":1},500);
    }, 
    function() { 
       $(this).stop().animate({"opacity":0.75}, 500);
    }
);

您还可以使用 CSS 过渡来获得类似的效果：

#navbar a { transition:all 0.5s; }
#navbar a:hover { opacity: 1; }

http://jsfiddle.net/Mu5p9/1/

于 2013-05-25T01:06:55.367 回答