Question

我对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);
});
});

感谢您的帮助！

Answer 1

.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/

如何让fadeTo用于导航栏链接？

1 个答案: