摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自定义动画</title> <script src=&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义动画</title>
<script src="jquery-3.3.1.min.js"></script>
<style type="text/css">
button{padding:5px 5px;margin:5px 5px;}
</style>
<script>
$(document).ready(function(){
$('.start').click(function(){
function startAni(){
$('div').animate({height:300},"slow");
$('div').animate({width:300},"slow");
$('div').css("background-color","blue");
$('div').animate({height:100},"slow");
$('div').animate({width:100},"slow");
}
startAni();
});
$('.stop').click(function(){
$('div').stop()
})
$('.stopall').click(function(){
$('div').stop(true,true)
})
});
</script>
</head>
<body>
<button class="start">开始动画</button><button class="stop">结束当前动画</button><button class="stopall">结束所有动画</button>
<div style="width:50px;height:50px;position:absolute;left:10px;top:50px;background-color:red;"></div>
</body>
</html>动画队列停止当前 及全部停止的测试,学完动画之后感觉好晕啦,一点没有记住似的,看了好几遍。
批改老师:灭绝师太批改时间:2018-11-23 13:42:11
老师总结:没事啦,多敲几遍就好了,用两遍就熟练啦!