<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery自定义动画</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-size: 12px;}
.box1,.box2,.box3,.box4,.box5,.box6{margin-top: 30px;height: 100px; }
.box{border: 1px solid #000;width: 100px;height: 100px;margin: 0 30px;line-height: 100px;text-align: center;background: yellow;color: #ff6500;}
.fl{float: left;}
.clear{clear: both;}
.box_header{width: 600px;margin:0 auto;height: 5px;}
.box_header ul{width: 600px;height: 30px;}
.box_header ul li{width: 98px;height: 28px;line-height: 28px; color: #fff;list-style: none;border: 1px solid #ccc;text-align: center;background: #ff6500;}
</style>
</head>
<body>
<div class="box_header">
<ul class="ul_header">
<a href=""><li class="fl">1</li></a>
<a href=""><li class="fl">2</li></a>
<a href=""><li class="fl">3</li></a>
<a href=""><li class="fl">4</li></a>
<a href=""><li class="fl">5</li></a>
<a href=""><li class="fl">6</li></a>
</ul>
</div>
<div class="clear"></div>
<div class="box1">
<input type="button" value="点击隐藏" id="bt1" class="fl">
<div class="fl box" id="box1">hide隐藏</div>
<input type="button" value="点击显示" id="bt2" class="fl">
<div class="fl box" id="box2">show显示</div>
</div>
<div class="clear"></div>
<div class="box2">
<input type="button" value="向下滑动" id="bt3" class="fl">
<div class="fl box" id="box3">slideDown下滑</div>
<input type="button" value="向上滑动" id="bt4" class="fl">
<div class="fl box" id="box4">slideUp上滑</div>
<input type="button" value="切换" id="bt5" class="fl">
<div class="fl box" id="box5">shideToggle切换</div>
</div>
<div class="clear"></div>
<div class="box1">
<input type="button" value="淡入" id="bt6" class="fl">
<div class="fl box" id="box6">fadeIn淡入</div>
<input type="button" value="淡出" id="bt7" class="fl">
<div class="fl box" id="box7">fadeOut淡出</div>
<input type="button" value="切换" id="bt8" class="fl">
<div class="fl box" id="box8">fadeToggle切换</div>
<input type="button" value="指定淡出" id="bt9" class="fl">
<div class="fl box" id="box9">fadeTo</div>
</div>
<div class="clear"></div>
<div class="box1">
<input type="button" value="动画开始" id="bt10" class="fl">
<input type="button" value="动画停止" id="bt11" class="fl">
<div class="fl box" id="box10">animate,stop</div>
</div>
<div class="clear"></div>
<script type="text/javascript">
$(function(){
$('#bt1').click(function(){
$('#box1').hide(1500); //hide隐藏某元素
})
$('#box2').hide();
$('#bt2').click(function(){
$('#box2').show(1500); //show显示某元素
})
$('#box3').hide();
$('#bt3').click(function(){
$('#box3').slideDown(1500); //slideDown使元素下滑
})
$('#bt4').click(function(){
$('#box4').slideUp(1500); //slideUp使元素上滑
})
$('#bt5').click(function(){
$('#box5').slideToggle(1500); //slideToggle切换上下滑动
})
$('#box6').hide();
$('#bt6').click(function(){
$('#box6').fadeIn(1500); //fadeIn使元素淡入
})
$('#bt7').click(function(){
$('#box7').fadeOut(1500); //fadeOut使元素淡出
})
$('#bt8').click(function(){
$('#box8').fadeToggle(1500); //fadeToggle淡入淡出切换
})
$('#bt9').click(function(){
$('#box9').fadeTo(1500,0.4); //fadeTo淡出到指定值
})
$('#bt10').click(function(){
$('#box10').animate({
height:'300px',
width:'300px'
},1500); //animate动画开始
})
$('#bt11').click(function(){
$('#box10').stop(true); //stop停止动画(true,true)第一个true动画暂停，第二个true动画跳过直接结束
})
$('.ul_header').hide()
$('.box_header').mouseover(function(){
$('.ul_header').show();
})
$('.ul_header').mouseout(function(){
$('.ul_header').hide();
})
})
</script>
</body>
</html>
