JQ：hover延迟效果

预览效果：

代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>hover延迟效果</title>
 6 <style type="text/css">
 7 *{ padding:0; margin:0; list-style:none;font-size:12px;}
 8 .mytab { background:#FF9900; width: 600px; margin-top: 100px; margin-right: auto; margin-left: auto; height: 230px; }
 9 .mytab .title li { float: left; width: 100px; height: 30px; line-height: 30px; text-align: center; background: #099; border: 1px solid #FFF; margin-left: 14px; margin-top: 14px; }
10 .mytab .content li { line-height: 200px; text-align: center; height: 200px; width: 600px; clear: both; }
11 .mytab .title li.cur { color:#000; background: #FFF; font-weight: bold; border: 1px solid #000; }
12 a { color:#FFF}
13 .mytab .title li.cur a{ color:#000;}
14 </style>
15 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
16 <script>
17 $(function(){
18 var t_li = $(".mytab .title li")
19 var c_li = $(".mytab .content li")
20 t_li.hover(function(){
21 var i = t_li.index($(this));
22 function way(){
23 t_li.removeClass("cur").eq(i).addClass("cur");
24 c_li.hide().eq(i).show();
25 }
26 timer=setTimeout(way,500);
27 },function(){
28 clearTimeout(timer);
29 });
30 });
31 </script>
32 </head>
33 <body>
34 <div class="mytab">
35   <ul class="title">
36     <li class="cur"><a href="#">标题1</a></li>
37     <li><a href="#">标题2</a></li>
38     <li><a href="#">标题3</a></li>
39     <li><a href="#">标题4</a></li>
40     <li><a href="#">标题5</a></li>
41   </ul>
42     <ul class="content">
43     <li>内容1</li>
44     <li style="display:none;">内容内容2</li>
45     <li style="display:none;">内容内容内容3</li>
46     <li style="display:none;">内容内容内容内容4</li>
47     <li style="display:none;">内容内容内容内容内容5</li>
48   </ul>
49 </div>
50 </body>
51 </html>

 

posted @ 2013-03-20 18:32  tinyphp  Views(2017)  Comments(0)  Edit  收藏  举报