Rumah > Artikel > hujung hadapan web > jQuery melaksanakan kesan senarai juntai bawah penukaran tab sekunder dengan delay_jquery

jQuery melaksanakan kesan senarai juntai bawah penukaran tab sekunder dengan delay_jquery

WBOYasal: 2016-05-16 15:41:221069semak imbas

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan kesan senarai juntai bawah penukaran tab sekunder dengan kelewatan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu senarai lungsur dengan kesan tertunda berdasarkan jQuery, dengan kesan animasi.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-delay-show-menu-style-codes/

Kod khusus adalah seperti berikut:

<!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" />
<title>二级tab切换</title>
<style type="text/css">
 *{margin:0;padding:0;}
 body{padding:10px ;}
 #div1{background:#333;height:30px;width:400px;margin:0 0 10px 0;}
 #div1 li { width: 100px; float:left;line-height:30px; background: 333; margin:0 5px;list-style:none; text-align: center;}
 #div1 li a { color:#fff; text-decoration:none;font-size:12px; display:block;}
 #div1 li a:hover { text-decoration:underline;}
 #div1 li span { display: none;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
 <div id="div1">
   <ul id="nav">
    <li>
    <a href="#">menu1</a>
    <span><a href="#">111</a></span>
    </li>
    <li>
    <a href="#">menu2</a>
    <span><a href="#">222</a></span>
    </li>
    <li>
    <a href="#">menu3</a>
    <span><a href="#">CopyRight@</a></span>
    </li>
    </ul>
  </div>
</body>
<script type="text/javascript">
 $(document).ready(function() { 
 $("ul#nav li").hover(function() { //Hover over event on list item
 $(this).find("span").show(200).css({ 'background' : '#1376c9','display' : 'block'}); //Show the subnav
 } , function() { //on hover out...
 $(this).find("span").hide(200); //Hide the subnav
 });
 });
</script>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js melaksanakan kod kesan menu lungsur yang mengklik untuk mengembangkan kemahiran downward_javascriptArtikel seterusnya：js melaksanakan kod kesan menu lungsur yang mengklik untuk mengembangkan kemahiran downward_javascript

Artikel berkaitan

Lihat lagi