摘要：<!DOCTYPE html /><html> <head> <meta charset="utf-8" /> <title>jquery的动画效果</title> &nbs
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>jquery的动画效果</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
}
p{position:absolute;}
.but11{
clear:both;
margin-top:20px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.but1').click(function(){
$('.di1').hide(2000); //隐藏显示的元素
})
$('.but2').click(function(){
$('.di1').show(2000); //显示隐藏的元素
})
$('.di2').hide();
$('.but3').click(function(){
$('.di2').slideDown(2000); //向下增大的动态效果（下滑）
})
$('.but4').click(function(){
$('.di2').slideUp(2000); //向上减小的动态效果（上滑）
})
$('.but5').click(function(){
$('.di3').slideToggle(2000); //通过变化切换元素显示/隐藏
})
$('.di4').hide();
$('.but6').click(function(){
$('.di4').fadeIn(2000); //淡入效果
})
$('.but7').click(function(){
$('.di4').fadeOut(2000); //淡出效果
})
$('.but8').click(function(){
$('.di5').fadeToggle(2000); //切换淡入淡出效果
})
$('.but9').click(function(){
$('.di6').fadeTo(2000,0.3); //渐变改变元素的透明的到某值
})
$('.but10').click(function(){
$('.p1').animate({ //自定义动画，操作单属性
fontSize:'50px'
},2000)
$('.p1').animate({ //自定义动画，可同时操作多属性
opacity:'0.3',
left:'500px'
},2000)
})
$('.but11').click(function(){
$('.di7').animate({ //使用预设的属性值
width:'toggle'
},2000)
})
$('.but12').click(function(){
$('.p1').stop(); //在动画或效果完成前停止，使用默认参数，即false
})
$('.but13').click(function(){
$('.p1').stop(true); //stopAll参数值设为true时
})
$('.but14').click(function(){
$('.p1').stop(false,true); //stopAll为false，goToEnd为true时
})
$('.but15').click(function(){
$('.p1').stop(true,true); //stopAll与goToEnd参数值都设为true时
})
})
</script>
<div class="di1"></div>
<br>
<button class="but1">隐藏</button>
<button class="but2">显示</button>
<hr />
<button class="but3">向下显示</button>
<button class="but4">向上隐藏</button>
<br><br>
<div class="di2"></div>
<br>
<button class="but5">切换</button>
<br><br>
<div class="di3"></div>
<hr>
<button class="but6">淡入</button>
<button class="but7">淡出</button>
<br><br>
<div class="di4"></div>
<br>
<button class="but8">切换</button>
<br><br>
<div class="di5"></div>
<br>
<button class="but9">改变透明度</button>
<br><br>
<div class="di6"></div>
<hr>
<button class="but10">自定义动画</button>
<button class="but12">停止1</button>
<button class="but13">停止2</button>
<button class="but14">停止3</button>
<button class="but15">停止4</button>
<br>
<p class="p1">发VS立刻就分类就仿佛解放军爱丽丝</p>
<br>
<button class="but11">预设值</button>
<br><br>
<div class="di7"></div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-03-11 09:03:08
老师总结：练习可以带上实际效果的案例,练习一下实际运用!
