在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段动画。