JQuery--动画队列以及清空队列.stop()方法

Posted 2020-10-13 QinXiao.Shou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery--动画队列以及清空队列.stop()方法相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         ul {
13             list-style: none;
14         }
15 
16         body {
17             background: #000;
18         }
19 
20         .wrap {
21             margin: 100px auto 0;
22             width: 630px;
23             height: 394px;
24             padding: 10px 0 0 10px;
25             background: #000;
26             overflow: hidden;
27             border: 1px solid #fff;
28         }
29 
30         .wrap li {
31             float: left;
32             margin: 0 10px 10px 0;
33         }
34 
35         .wrap img {
36             display: block;
37             border: 0;
38         }
39     </style>
40     <script src="lib/jquery-1.12.2.js"></script>
41     <script>
42         // 当鼠标移入li分区时，图片突出显示
43         // 当鼠标移出li分区时，图片变回正常
44         /* 需要添加事件实现排他的时候，尽量添加给有兄弟关系的标签身上 */
45         /**
46          *      动画队列
47          *          动画队列其实JQ动画的特点，只不过有时候这特特点很多时候不需要，
48          *          所以我们要清空动画队列，实现效果
49          *
50          *      清空队列
51          *          核心函数：
52          *                  .stop()
53          *              默认值：
54          *                  .stop(true,false)
55          *              // 第一个参数：是否清除队列
56          *              // 第二个参数：是否跳转到最终效果
57          *
58          * */
59             $(function () {
60                 $(‘li‘).mouseenter(function () {
61 
62                     $(this).stop().siblings().stop().fadeTo(400,0.4);
63                     $(this).fadeTo(400,1);
64                 })
65                 $(‘.wrap‘).mouseleave(function () {
66                    $(‘.wrap li‘).stop().fadeTo(400,1);
67                 });
68             });
69     </script>
70 </head>
71 <div class="wrap">
72     <ul>
73         <li><a href="#"><img src="images/01.jpg" /></a></li>
74         <li><a href="#"><img src="images/02.jpg" /></a></li>
75         <li><a href="#"><img src="images/03.jpg" /></a></li>
76         <li><a href="#"><img src="images/04.jpg" /></a></li>
77         <li><a href="#"><img src="images/05.jpg" /></a></li>
78         <li><a href="#"><img src="images/06.jpg" /></a></li>
79     </ul>
80 </div>
81 </body>
82 </html>

多段动画的用法：

1.同时指向多种动画例子：

1                 // 写在一起
2                 $(this).animate({
3                     height:"0px",
4                     opacity:0.4
5                 },2000);

2.执行队列动画

 1   <script src="lib/jquery-1.12.2.js"></script>
 2     <script>
 3         $(document).ready(function () {
 4             $(‘.btn‘).click(function () {
 5                 $(‘.con‘).animate({bottom:-165})
 6                     .animate({right:-320},function () {
 7                           alert(‘请继续保持开机时间‘);
 8                     });
 9             });
10         });
11     </script>

以上是关于JQuery--动画队列以及清空队列.stop()方法的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 停止动画-jQuery stop()

[ jquery 效果 stop(stopAll,goToEnd) ] 此方法用于停止所有在指定元素上正在运行的动画,如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马