<!DOCTYPE html><html><head>? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8" />? ? <title></title>? ? <style>? ? p {? ? ? ? color: red;? ? }? ? div{? ? ? ? width:200px;?? ? ? ? height: 100px;?? ? ? ? background-color: yellow;? ? ? ? color:red;? ? }? ? </style>? ? <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>? ? <h2>animate(上)</h2>? ? <p>慕課網(wǎng),專注分享</p>? ? <div id="aaron">內(nèi)部動畫</div>? ? 點擊觀察動畫效果：? ? <select id="animation">? ? ? ? <option value="1">動畫1</option>? ? ? ? <option value="2">動畫2</option>? ? ? ? <option value="3">動畫3</option>? ? ? ? <option value="4">動畫4</option>? ? </select>? ? <input id="exec" type="button" value="執(zhí)行動畫">? ? <script type="text/javascript">? ? $("#exec").click(function() {? ? ? ? var v = $("#animation").val();? ? ? ? var $aaron = $("#aaron");? ? ? ? if (v == "1") {? ? ? ? ? ? // 數(shù)值的單位默認(rèn)是px? ? ? ? ? ? $aaron.animate({? ? ? ? ? ? ? ? width ?:300,? ? ? ? ? ? ? ? height :300? ? ? ? ? ? });? ? ? ? } else if (v == "2") {? ? ? ? ? ? // 在現(xiàn)有高度的基礎(chǔ)上增加100px? ? ? ? ? ? $aaron.animate({? ? ? ? ? ? ? ? ?width ?: "+=100px",? ? ? ? ? ? ? ? ?height : "+=100px"? ? ? ? ? ? });? ? ? ? } else if (v == "3") {? ? ? ? ? ? $aaron.animate({? ? ? ? ? ? ? ? fontSize: "5em"? ? ? ? ? ? }, 2000, function() {? ? ? ? ? ? ? ? alert("動畫 fontSize執(zhí)行完畢!");? ? ? ? ? ? });? ? ? ? } else if (v == "4") {? ? ? ? ? ? //通過toggle參數(shù)切換高度? ? ? ? ? ? $aaron.animate({? ? ? ? ? ? ? ? width: "toggle"? ? ? ? ? ? });? ? ? ? }?? ? });? ? </script></body></html>前面的width我也換成了height和opacity
添加回答
舉報
0/150
提交
取消