posts - 3,  comments - 0,  trackbacks - 0

最近学到了bootstrap里的过渡效果,在用silidetoggle方法的时候出现了一个有意思的现象,在鼠标滑过速度过快或者次数过多或者其他不知名原因的情况下,收放效果一直重复,代码:

 1 <!DOCTYPE html>
 2 <html>
 3     <head lang="en">
 4         <meta name="viewport" content="width=device-width, initial-scale=1">
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <link rel="stylesheet" href="../res/bootstrap.css">
 8         <script src="../res/jquery-2.2.3.min.js"></script>
 9         <script src="../res/bootstrap.min.js"></script>
10         <style>
11             li a span{
12                 margin-right: 15px;
13                 color: deepskyblue;
14             }
15         </style>
16     </head>
17     <body style="margin-top: 50px">
18         <div class="container">
19             <div class="btn-group">
20                 <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
21                     water
22                     <span class="caret"></span>
23                 </button>
24                 <ul class="dropdown-menu" role="menu">
25                     <li>
26                         <a href="#">
27                             <span class="glyphicon glyphicon-piggy-bank"></span>
28                             基本信息
29                         </a>
30                     </li>
31                     <li>
32                         <a href="#">
33                             <span class="glyphicon glyphicon-book"></span>
34                             平面示图
35                         </a>
36                     </li>
37                     <li>
38                         <a href="#">
39                             <span class="glyphicon glyphicon-alert"></span>
40                             运行监测
41                         </a>
42                     </li>
43                     <li>
44                         <a href="#">
45                             <span class="glyphicon glyphicon-adjust"></span>
46                             平衡分析
47                         </a>
48                     </li>
49                     <li>
50                         <a href="#">
51                             <span class="glyphicon glyphicon-apple"></span>
52                             数据查询
53                         </a>
54                     </li>
55                     <li>
56                         <a href="#">
57                             <span class="glyphicon glyphicon-save"></span>
58                             CAD图
59                         </a>
60                     </li>
61                 </ul>
62             </div>
63         </div>
64         <script>
65             $(".btn-group").hover(function() {
66                 $(this).children("ul").slideToggle();
67             });
68         </script>
69     </body>
70 </html>

经过一番查找,看到了一个方法:stop()。

.stop 是jQuery中用于控制页面动画效果的方法。运行之后立刻结束当前页面上的动画效果。
stop在新版jQuery中添加了2个参数:
第一个参数的意思是是否清空动画序列,也就是stop的是当前元素的动画效果还是停止后面附带的所有动画效果,一般为false,跳过当前动画效果,执行下一个动画效果;
第二个参数是是否将当前动画效果执行到最后,意思就是停止当前动画的时候动画效果刚刚执行了一般,这个时候想要的是动画执行之后的效果,那么这个参数就为true。否则动画效果就会停在stop执行的时候。

然后我把这个方法加到silidetoggle前面,代码如下:
1 <script>
2             $(".btn-group").hover(function() {
3                 $(this).children("ul").stop(true, false).slideToggle();
4             });
5 </script>

然后,过渡动画不会再无意义重复了!stop()方法简单地来说,就是当鼠标离开目标区域时,立即终止当前没有执行完的过渡效果。

posted on 2016-04-27 14:50 apolo_0510 阅读(...) 评论(...) 编辑 收藏