|
最近学到了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()方法简单地来说，就是当鼠标离开目标区域时，立即终止当前没有执行完的过渡效果。 | 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-5-31 12:49:54