JQ动画作业2

Original 2019-01-04 09:44:47 225
abstract:隐藏,显示,淡入淡出等相对简单,平时也经常用,就没做案例,主要掌握animate()与stop的使用方法<!doctype html><html><head><meta charset="gbk"><title>JQ动画作业</title><script src="jquery-3.3.1.

隐藏,显示,淡入淡出等相对简单,平时也经常用,就没做案例,主要掌握animate()与stop的使用方法
<!doctype html>

<html>

<head>

<meta charset="gbk">

<title>JQ动画作业</title>

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

</head>

<style>

.box{width:100px;height:100px;background:#ccc;position:absolute}

</style>

<script>

$(function(){

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

$('.box').animate({left:"400px",width:'200px',height:'200px',background:'#f00',opacity:'0.3'},1500,function(){

alert('DIV变大变透明啦');

});

})


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

$('.box').stop(true)

})


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

$('.box').stop(true,true)

})

})


</script>

<body>

<button>移动DIV</button><button id='stop'>停止</button><button id='finish'>立即结束</button>

<div></div>


</body>

</html>


Correcting teacher:韦小宝Correction time:2019-01-04 10:34:00
Teacher's summary:案例是很重要的,课后一定要多写点小案例!这样才能提升的快!

Release Notes

Popular Entries