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

语法:

$().delay(speed)

说明:

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

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div { width:50px; height:50px; background-color:lightskyblue; margin-top: 6px; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("div").click(function () { $(this).animate({ "width": "150px" }, 1000) .delay(2000) .animate({ "height": "150px" }, 1000); }); }) </script> </head> <body> <div></div> </body> </html>

浏览器预览效果如图所示。

分析:

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