<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 自定义动画-停止动画</title>
<!-- 引入线上jquery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type='text/css'>
*{padding:0;margin:0;}
body{min-width:500px;}
.box{
width:200px;
height:200px;
background-color:#f00;
color:#fff;
line-height:200px;
text-align:center;
font-size:14px;
margin-bottom:20px;
}
button{
width:200px;
height:40px;
border:none;
}
.div2,.div3,.div6{
display:none;
}
.div10{
position:relative;
}
.nav{
background-color:#002b5e;
text-align:center;
margin-top:20px;
margin-left:20px;
border-radius:5px;
font-size:14px;
}
ul{
margin-left:30px;
}
ul li{
list-style:none;
}
ul li a{
color:#fff;
text-decoration:none;
float:left;
width:100px;
height:50px;
line-height:50px;
border-radius:5px;
}
ul li a:hover{
color:#ff0;
background:#031426;
transform:skew(190deg,180deg);
border-radius:10px;
box-shadow:0px 1px 0px blue;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
// hide([speed],[callback]) 隐藏显示的元素
// speed 速度 单位是毫秒
// callback 动画完成后执行的函数
$('#but1').click(function(){
$('.div1').hide(2000);
});
// hide([speed],[callback]) 显示隐藏的元素
$('#but2').click(function(){
$('.div2').show(2000);
});
// slideDown() 下滑显示的效果
$('#but3').click(function(){
$('.div3').slideDown(2000);
});
// slideUp() 上滑隐藏的效果
$('#but4').click(function(){
$('.div4').slideUp(2000);
});
// slideToggle() 上滑隐藏 下滑显示 切换
$('#but5').click(function(){
$('.div5').slideToggle(2000);
});
// fadeIn() 淡入显示的效果
$('#but6').click(function(){
$('.div6').fadeIn(2000);
});
// fadeOut() 淡出隐藏的效果
$('#but7').click(function(){
$('.div7').fadeOut(2000);
});
// fadeToggle() 淡出隐藏 淡入显示 切换
$('#but8').click(function(){
$('.div8').fadeToggle(2000);
});
// fadeTo([speed],opacity,[callback]) 淡出到指定值
// opacity为必须参数 值介于0与1之间
$('#but9').click(function(){
$('.div9').fadeTo(2000,0.3);
});
// animate(styles,[speed],[callback]) 自定义动画
//font-size 等写法需要改成驼峰写法 fontSize
$('#but10').click(function(){
$('.div10').animate({
'fontSize':'40px',
'left':'200px',
'top':'-100px'
},
2000,
function(){
$('.div10').animate({
'fontSize':'14px',
'left':'0',
'top':'0'
},2000);
});
});
$('a').hover(
function(){
$(this).stop().animate(
{fontSize:'18px'}
,1000);
},function(){
$(this).stop().animate(
{fontSize:'14px'}
,1000);
}
);
});
</script>
</head>
<body>
<div>
<ul>
<li><a href='http://www.php.cn'>首页</a></li>
<li><a href='http://www.php.cn'>案例</a></li>
<li><a href='http://www.php.cn'>关于我们</a></li>
<li><a href='http://www.php.cn'>联系我们</a></li>
<div style='clear:both;'></div>
</ul>
</div>
<br>
<hr>
<br>
<div class='box div1'>hide()</div>
<p><button id='but1'>隐藏</button></p>
<br>
<hr>
<br>
<div class='box div2'>show()</div>
<p><button id='but2'>显示</button></p>
<br>
<hr>
<br>
<div class='box div3'>slideUp()</div>
<p><button id='but3'>下滑</button></p>
<br>
<hr>
<br>
<div class='box div4'>show()</div>
<p><button id='but4'>上滑</button></p>
<br>
<hr>
<br>
<div class='box div5'>slideToggle()</div>
<p><button id='but5'>上滑/下滑</button></p>
<br>
<hr>
<br>
<div class='box div6'>fadeIn()</div>
<p><button id='but6'>淡入</button></p>
<br>
<hr>
<br>
<div class='box div7'>fadeOut()</div>
<p><button id='but7'>淡出</button></p>
<br>
<hr>
<br>
<div class='box div8'>fadeToggle()</div>
<p><button id='but8'>淡出/淡入</button></p>
<br>
<hr>
<br>
<div class='box div9'>fadeTo()</div>
<p><button id='but9'>淡出到指定值</button></p>
<br>
<hr>
<br>
<div class='box div10'>animate()</div>
<p><button id='but10'>自定义动画</button></p>
</body>
</html>
