Code d'effet de menu secondaire en fondu entrant et sortant implémenté par jQuery

Code d'effet de menu secondaire en fondu entrant et sortant implémenté par jQuery_jquery

WBOY

Libérer： 2016-05-16 15:39:11

original

1005 Les gens l'ont consulté

L'exemple de cet article décrit le code d'effet de menu secondaire de fondu entrant et sortant implémenté par jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu avec jQuery ajouté. Un menu apparemment ordinaire a soudainement de la saveur et de la vitalité. jQuery1.3.2 est cité ici pour que le menu secondaire contextuel ait un effet de fondu d'entrée et de sortie. Ce n'est pas accrocheur, mais comparé à un menu sans effet, en termes d'expérience, c'est déjà bien mieux.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-fade-in-out-2l-nav-menu-codes/

Le code spécifique est le suivant :

<!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=gb2312" />
<title>bar</title>
<style type="text/css">
*{margin:0px;padding:0px;font-size:12px;}
ul{list-style-type:none;}
a{text-decoration:none;color:#000;}
#nav{line-height:30px;}
#nav li{float:left;width:100px;}
#nav li a{display:block;width:100px;background:#ccc;text-align:center;}
#nav li a:hover{background:#666;color:#fff;font-weight:bold;}
#nav li ul{line-height:20px;position:absolute;display:none;}
#nav li ul li{float:left;width:130px;}
#nav li ul li a{display:block;width:130px;background:#eee;text-align:left;padding-left:30px;}
#nav li ul li a:hover{background:red;font-weight:normal;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
  var key=$("#nav>li");
   key.mouseover(function(){
    $(this).children(".nn1").fadeIn();
   });
   key.mouseout(function(){
    $(this).children(".nn1").fadeOut();
   });
});
</script>
</head>
<body>
<div>
<ul id="nav">
<li><a href="#">第一个</a>
<ul class="nn1">
<li><a href="#">1.0001</a></li>
<li><a href="#">1.0002</a></li>
<li><a href="#">1.0003</a></li>
</ul>
</li>
<li><a href="#">第二个</a>
<ul class="nn1">
<li><a href="#">2.0001</a></li>
<li><a href="#">2.0002</a></li>
<li><a href="#">2.0003</a></li>
</ul>
</li>
<li><a href="#">第三个</a>
<ul class="nn1">
<li><a href="#">3.0001</a></li>
<li><a href="#">3.0002</a></li>
<li><a href="#">3.0003</a></li>
</ul>
</li>
<li><a href="#">第四个</a>
<ul class="nn1">
<li><a href="#">4.0001</a></li>
<li><a href="#">4.0002</a></li>
<li><a href="#">4.0003</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la programmation jQuery de chacun.