這篇文章主要為大家展示了“jQuery如何創建自定義的動畫”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jQuery如何創建自定義的動畫”這篇文章吧。
jQuery 效果 - 動畫
jQuery animate() 方法允許您創建自定義的動畫。語法：
$(selector).animate({params},speed,callback);必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成后所執行的函數名稱。
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:"250px"});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<p>把 div 元素向右移動，直到 left 屬性等于 250 像素為止。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>提示：默認地，所有 HTML 元素都有一個靜態位置，且無法移動。
提示：如需對位置進行操作，要把元素的 position 屬性設置為 relative、fixed 或 absolute！
jQuery animate() - 操作多個屬性
請注意，生成動畫的過程中可同時使用多個屬性：
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:"250px",
opacity:"0.5",
height:"150px",
width:"150px"
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？是的，幾乎可以！
不過，當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如：必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同時，色彩動畫并不包含在核心 jQuery 庫中。如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。
jQuery animate() - 使用相對值
也可以定義相對值（該值相對于元素的當前值）。需要在值的前面加上 += 或 -=：
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:"250px",
height:"+=150px",
width:"+=150px"
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
jQuery animate() - 使用預定義的值
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:"toggle"
});
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
jQuery animate() - 使用隊列功能
默認地，jQuery 提供針對動畫的隊列功能。這意味著如果您編寫多個 animate() 調用：
jQuery 會創建包含這些方法調用的“內部”隊列，然后逐一運行這些 animate 調用。
下面的實例中，我們利用隊列功能執行不同的動畫：
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:"300px",opacity:"0.4"},"slow");
div.animate({width:"300px",opacity:"0.8"},"slow");
div.animate({height:"100px",opacity:"0.4"},"slow");
div.animate({width:"100px",opacity:"0.8"},"slow");
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>下面的例子把 <div> 元素移動到右邊，然后增加文本的字號：
<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:"100px"},"slow");
div.animate({fontSize:"3em"},"slow");
});
});
</script>
</head>
<body>
<button>開始動畫</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>以上是“jQuery如何創建自定義的動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
