首页 > 编程笔记 > JavaScript笔记 > jQuery动画

jQuery delay()方法的用法

在 jQuery 中,我们可以使用 delay() 方法来延迟动画的执行。

语法:

$().delay(speed)

speed 是一个必选参数,表示动画的速度,单位为毫秒。

举例:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <style type="text/css">
  7. div
  8. {
  9. width:50px;
  10. height:50px;
  11. background-color:lightskyblue;
  12. margin-top: 6px;
  13. }
  14. </style>
  15. <script src="js/jquery-1.12.4.min.js"></script>
  16. <script>
  17. $(function () {
  18. $("div").click(function () {
  19. $(this).animate({ "width": "150px" }, 1000)
  20. .delay(2000)
  21. .animate({ "height": "150px" }, 1000);
  22. });
  23. })
  24. </script>
  25. </head>
  26. <body>
  27. <div></div>
  28. </body>
  29. </html>
预览效果如图 1 所示。
预览效果
图 1:预览效果

在这个例子中,我们定义了两个动画。在第 1 段动画之后使用 delay() 方法来延迟 2 秒(即 2000 毫秒),然后执行第 2 段动画。

所有教程

优秀文章