abstrait： 通過jQuery動畫學(xué)習(xí)后，更加鞏固了之前學(xué)習(xí)的JQuery的基礎(chǔ)知識，jQuery小案例如下所示：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery自定義動畫</title> &
通過jQuery動畫學(xué)習(xí)后，更加鞏固了之前學(xué)習(xí)的JQuery的基礎(chǔ)知識，jQuery小案例如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery自定義動畫</title>
<link rel="stylesheet" type="text/css" href="../css/css.css">
<link rel="shortcut icon" type="image/x-icon" href="../picture/mi.png">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
/*Css內(nèi)部樣式寫入*/
div {width: 700px;height: 600px; margin: 15px auto;text-align: center;background: #ccc;line-height: 600px;
position: relative;}
.bt{margin-left: 560px;width: 200px;height: 80px;background: pink;}
</style>
</head>
<body>
<!-- 自定義函數(shù)（animate）
語法：$(select).animate({params},speed,fn)
必須的Params：參數(shù)定義形成的動畫，CSS屬性
speed：動畫持續(xù)的時長，可以用英文，slow fast或者毫秒
fn：動畫完成后執(zhí)行的函數(shù) -->
<!-- 頁面布局： -->
<div>
<p>自己第一個自定義的小動畫</p>
</div>
<input type="button" value="點擊動畫開始">
<script type="text/javascript">
$(document).ready(function(){
$('input').addClass('bt');
//自定義動畫，animate點擊按鍵后字體變大且模糊
//div變小并且向左移動逐漸模糊
$('input').click(function(){
$('div>p').animate({
//字體變大并且變的模糊，font-size一定要用駝峰寫法
fontSize:'30px',
opacity:'0.5'
},1500);
})
$('input').click(function(){
$('div').animate({
//點擊按鈕后div變小并且向左移動
left:'300px',
opacity:'0.7',
width:'400px',
height:'400px',
//垂直方向顯示或者隱藏，如果水平方向的話改為width
//height:'toggle'
},1500)
})
})
</script>
</body>
</html>