JQ动画作业2

原创 2019-01-04 09:44:47 307
摘要:隐藏,显示,淡入淡出等相对简单,平时也经常用,就没做案例,主要掌握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>


批改老师:韦小宝批改时间:2019-01-04 10:34:00
老师总结:案例是很重要的,课后一定要多写点小案例!这样才能提升的快!

发布手记

热门词条