abstrak：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery 自定義動(dòng)畫-停止動(dòng)畫</title><!-- 引入線上jquery文件 --><script src="https
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 自定義動(dòng)畫-停止動(dòng)畫</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 動(dòng)畫完成后執(zhí)行的函數(shù)
$('#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為必須參數(shù) 值介于0與1之間
$('#but9').click(function(){
$('.div9').fadeTo(2000,0.3);
});
// animate(styles,[speed],[callback]) 自定義動(dòng)畫
//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://ipnx.cn'>首頁</a></li>
<li><a href='http://ipnx.cn'>案例</a></li>
<li><a href='http://ipnx.cn'>關(guān)于我們</a></li>
<li><a href='http://ipnx.cn'>聯(lián)系我們</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'>自定義動(dòng)畫</button></p>
</body>
</html>
Guru membetulkan：查無此人Masa pembetulan：2019-02-16 09:05:26
Rumusan guru：完成的不錯(cuò)。jQuery最多的就是事件操作，練熟了對(duì)完成項(xiàng)目幫助很大，繼續(xù)加油。