动画的开始与暂停

Original 2019-01-04 11:00:47 171
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="jquery-3.3.1.min.js">

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

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

<style type="text/css">

.box{

width: 200px;

height: 200px;

background: red;

text-align: center;

color: orange;

font-weight: bold;

border-radius: 20px;

position: absolute;

}

</style>

<script type="text/javascript">

$(document).ready(function(){

$('.bt1').click(function(){


$('.box').animate({

left:'800px',

top:'400px',

width:'100px',

height:'100px',

opacity:'0.4',

},2800)

})

$('.bt2').click(function(){

$('.box').stop();

})

})


</script>

</head>

<body>

<button>点击开始</button>

<button>点击暂停</button>


<div>倾斜式移动</div>


</body>

</html>

<!-- 获取元素,给元素添加一个事件函数,在函数内获取要操作的元素.stop().

stop()里面可以给参数,也可以不给定 -->


Correcting teacher:韦小宝Correction time:2019-01-04 11:03:24
Teacher's summary:写的很不错了,jQuery和js最有意思的地方就是动画效果很灵活!

Release Notes

Popular Entries