经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery的animate动画方法及动画排队问题解决
来源:cnblogs  作者:小白可别不举铁  时间:2021/4/6 10:07:28  对本文有异议

animate()动画方法

  • 作用:执行css属性集的自定义动画

  • 语法:$(selector).animate(styles,speed,easing,callback)

    ? 参数1: css 的属性名和运动结束位置的属性值的集合。
    ? 参数2:可选,规定动画的速度,默认是 "normal"。其他值,“slow”、“normal”、“fast”,数字格式,单位为毫秒。
    ? 参数3:可选,规定在不同的动画点中设置动画速度的 easing 函数,值包含 swing(变速) 和linear(匀速)。
    ? 参数4:可选,animate 函数执行完之后,要执行的回调函数。
    ? 注意:①所有有数值的属性值都可以运动;
    ②其他的运动方法比如 slideUp() 等,也有参数3 和参数4

  1. <style>
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. p{
  7. position: relative;
  8. left: 0;
  9. margin-bottom: 10px;
  10. background-color: skyblue;
  11. width: 50px;
  12. height: 50px;
  13. }
  14. </style>
  15. <!--------------------------------------->
  16. <body>
  17. <p>1</p>
  18. <p>2</p>
  19. <p>3</p>
  20. <p>4</p>
  21. <p>5</p>
  22. <p>6</p>
  23. <p>7</p>
  24. <p>8</p>
  25. <script src="../jq/jquery-1.12.4.min.js"></script>
  26. <script>
  27. var $ps = $("p");
  28. //实际操作中,将时间这种易变的存储到一个变量中更好
  29. var during = 1000;
  30. //所有有数值的属性值都可以运动
  31. $ps.click(function(){
  32. $(this).animate({"width":500,"opacity":0.5},during,"swing")
  33. })
  34. </script>
  35. </body>

动画排队

  • 同一个元素对象身上,如果定义了多个动画,动画会排队等待执行。
  • 如果是不同的元素对象都有动画,不会出现排队机制。
  • 如果是其他非运动的代码,不会等待运动完成。比如,改变css样式,不会排队。
  1. <style>
  2. div{
  3. width: 100px;
  4. height: 100px;
  5. border: 8px solid #ccc;
  6. position: absolute;
  7. left: 0;
  8. top: 0;
  9. background: url(../../imgs/1.jpg) no-repeat center center;
  10. }
  11. .box2{
  12. border-radius: 50%;
  13. overflow: hidden;
  14. }
  15. div span{
  16. position: absolute;
  17. left: 0;
  18. top: 0;
  19. width: 100%;
  20. height: 100%;
  21. background-color: rgba(221, 130, 130, 0.4);
  22. }
  23. </style>
  24. <!-------------css样式------------------->
  25. <body>
  26. <div class="box1"><span></span></div>
  27. <div class="box2"><span></span></div>
  28. <script src="../jq/jquery-1.12.4.min.js"></script>
  29. <script>
  30. var $box1 = $(".box1");
  31. var $box2 = $(".box2");
  32. var during = 2000;
  33. //动画排队对比
  34. $box2.animate({"left": 400,"top":400},during)
  35. //box1、box2上各自进行各自的动画
  36. //同一元素上的多个动画排队
  37. $box1.animate({"left": 400},during)//排队
  38. $box1.animate({"top": 400}, during)
  39. // 动画的底部就是一个定时器,异步加载
  40. // 非运动的代码,关于同一个元素对象的,不会排队
  41. //$box1.css("height",200)
  42. </script>
  43. </body>
  • 自带动画的显示隐藏方法,如果设置给同一个元素,也有动画排队
  1. //其他的运动方法,如果设置给同一个元素,也会发生排队
  2. $box2.mouseenter(function(){
  3. $(this).children().slideUp(during)
  4. })
  5. $box2.mouseleave(function(){
  6. $(this).children().slideDown(during)
  7. })
  8. //鼠标快速的移上移下,之后box2的灰色span就一直在滑进滑出,直到执行完所有次数
  • 同一个元素身上的运动,可以简化成链式调用的方法
  1. //同一个元素进行多个运动,可以简化通过链式调用实现
  2. //但是还是要进行排队
  3. $box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
delay()延迟方法
  • 将delay()设置在某个运动方法之前,表示后面的运动要在规定的时间之后再执行,有延迟运动的效果
  • delay()的参数是时间的数值,其他的运动方法也有延迟效果
  1. //延迟
  2. $box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)
stop()停止动画方法
  • 设置元素对象身上的排队的动画以何种方式进行停止

  • stop()有两个参数,可以得到四种停止方式,参数都是布尔值

    ? 参数1:设置是否清空后面的动画排队,如果是 true 表示清空(后面还排着的动画也一起被清除掉,不再执行),如果是 false 表示不清空只停止当前的一个动画(后面的动画立即开始执行)。
    ? 参数2:设置当前动画是否立即完成,如果是 true 表示立即完成,对象会立刻走到结束位置,如果是 false 表示不完成当前动画,立即停止在当前位置

  1. <style>
  2. div {
  3. width: 100px;
  4. height: 100px;
  5. border: 8px solid #ccc;
  6. position: absolute;
  7. left: 0;
  8. top: 40;
  9. background: url(../../imgs/1.jpg) no-repeat center center;
  10. }
  11. div span {
  12. position: absolute;
  13. left: 0;
  14. top: 0;
  15. width: 100%;
  16. height: 100%;
  17. background-color: rgba(221, 130, 130, 0.4);
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <input type="button" value="true true" id="btn1">
  23. <input type="button" value="true false" id="btn2">
  24. <input type="button" value="false false" id="btn3">
  25. <input type="button" value="false true" id="btn4"><br>
  26. <div class="box1"><span></span></div>
  27. <script src="../jq/jquery-1.12.4.min.js"></script>
  28. <script>
  29. var $box1 = $(".box1");
  30. var during = 2000;
  31. //同一元素上的多个动画排队
  32. $box1.animate({ "left": 400 }, during)
  33. $box1.animate({ "top": 400 }, during)
  34. $box1.animate({"left":0},during)
  35. $box1.animate({"top":40},during)
  36. // 停止动画
  37. //添加按钮点击事件
  38. var $btn1 = $("#btn1")
  39. var $btn2 = $("#btn2")
  40. var $btn3 = $("#btn3")
  41. var $btn4 = $("#btn4")
  42. //true true 清空后面排队动画 且 当前动画立即完成,停到结束位置
  43. $btn1.click(function () {
  44. $box1.stop(true, true);
  45. })
  46. //true false 清空动画 停在当前
  47. $btn2.click(function () {
  48. $box1.stop(true, false);
  49. })
  50. //false false 不清空后面动画,停在当前
  51. //然后执行下一步动画
  52. $btn3.click(function () {
  53. $box1.stop(false, false);
  54. })
  55. //false true 不清空后面动画,当前运动立即到结尾
  56. $btn4.click(function () {
  57. $box1.stop(false, true);
  58. })
  59. </script>
  60. </body>
  • 默认情况下,参数值为false
  • 实际工作中,一般要求清空后面的排队,停止当前的位置,多使用stop(true),第二个参数不设置默认为false

清空动画排队

动画排队问题
  • 如果将开启运动的程序放在一个事件函数中,事件多次被触发,会执行多次函数,就会在一个元素身上添加了多个动画,会进行动画排队。(动画积累问题)

    需要去清除排队的动画,进行防骚扰操作。

  • 解决方法

    方法一:利用stop()方法

    在每一个运动函数之前都增加一个stop(true),表示在运动执行之前,会将前面排队的动画清空,然后停止在当前位置

  1. <style>
  2. div {
  3. width: 100px;
  4. height: 100px;
  5. border: 8px solid #ccc;
  6. position: absolute;
  7. left: 0;
  8. top: 0;
  9. background: url(../../imgs/1.jpg) no-repeat center center;
  10. }
  11. div span {
  12. position: absolute;
  13. left: 0;
  14. top: 0;
  15. width: 100%;
  16. height: 100%;
  17. background-color: rgba(221, 130, 130, 0.4);
  18. }
  19. </style>
  20. <body>
  21. <input type="button" value="true true" id="btn1">
  22. <input type="button" value="true false" id="btn2">
  23. <input type="button" value="false false" id="btn3">
  24. <input type="button" value="false true" id="btn4"><br>
  25. <div class="box1"><span></span></div>
  26. <script src="../jq/jquery-1.12.4.min.js"></script>
  27. <script>
  28. var $box1 = $(".box1");
  29. var during = 2000;
  30. //清空动画
  31. $box1.mouseenter(function(){
  32. $(this).children().stop(true).slideUp(during)
  33. })
  34. $box1.mouseleave(function(){
  35. $(this).children().stop(true).slideDown(during)
  36. })
  37. </script>
  38. </body>
方法二:利用函数节流方法

如果元素在运动,直接return,不要执行后面的运动代码。

每个jQuery对象,都能调用一个is()方法,作用是显示元素对象的某种状态
如果参数位置是is(":animated"),animated是正在运动的意思,返回值是布尔值,true表示正在运动,false表示没有运动

  1. //函数节流方法
  2. $box1.mouseenter(function(){
  3. if(is(":animated")){
  4. //如果判断是正在运动的话,直接return返回,不再执行其他动画
  5. return;
  6. }
  7. //没有运动的话,则继续执行后面的新动画
  8. $(this).children().slideup(during);
  9. })
  10. $box1.mouseenter(function(){
  11. if(is(":animated")){
  12. //如果判断是正在运动的话,直接return返回,不再执行其他动画
  13. return;
  14. }
  15. //没有运动的话,则继续执行后面的新动画
  16. //有时候为了保险起见,会与stop(true)结合使用
  17. $(this).children().stop(true).slideup(during);
  18. })
  • 有时候为了保险起见,函数节流使用时,也会与stop(true)结合使用

  • stop(true)和函数节流方法,这两种解决动画积累问题的方法还是有区别的。stop方法可以使停止时,停在当前的位置,而函数节流,停止时return返回后,当前所处的动画一般都是会执行完的。

原文链接:http://www.cnblogs.com/dreamtown/p/14613289.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号