自定义动画移动停止效果

原创 2018-12-27 00:55:01 245
摘要:<!DOCTYPE html><html><head> <title>jquery自定义动画</title> <script type="text/javascript" src="./jquery-3.3.1.min.js"></script> <style type

<!DOCTYPE html>

<html>

<head>

<title>jquery自定义动画</title>

<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>

<style type="text/css">

.box1{width: 200px;height: 200px;background: blue;margin-top: 20px;position: absolute;}

</style>

</head>

<body>


<script type="text/javascript">

$(document).ready(function(){

$('#right').click(function(){

$('.box1').animate({

left:'+500px',


},3000)

$('.box1').animate({fontSize:'50px'},500)

})

//stop 停止动画效果

$('#stop').click(function(){

$('.box1').stop() 

})

})

</script>

<button id="right">右移</button>

<button id="stop">停止</button>

<div class="box1"> 王凯 </div>

</body>

</html>


批改老师:查无此人批改时间:2018-12-27 09:21:14
老师总结:还不错,以后写作业,写一些总结,备注。这样老师能知道你学怎么样了,可以给你些建议。

发布手记

热门词条