jQuery animate() jQueryanimate()|jQuery

本文概述

jQuery animate()方法使用多个属性
jQuery animate()方法使用相对值
使用预定义值的jQuery animate()方法
jQuery Color动画

jQuery animate()方法为你提供了一种创建自定义动画的方法。
句法：

$(selector).animate({params}, speed, callback);

在这里, params参数定义了要设置动画的CSS属性。
speed参数是可选的, 它指定效果的持续时间。可以将其设置为“慢”, “快”或毫秒。
callback参数也是可选的, 它是在动画完成后执行的功能。
让我们以一个简单的示例来看动画效果。

< !DOCTYPE html> < html> < head> < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> < /script> < script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '450px'}); }); }); < /script> < /head> < body> < button> Start Animation< /button> < p> A simple animation example:< /p> < div style="background:#98bf21; height:100px; width:100px; position:absolute; "> < /div> < /body> < /html>

立即测试
输出：
开始动画
一个简单的动画示例：
注意：所有HTML元素的默认位置都是静态的。如果要操纵它们的位置, 请将CSS position属性设置为元素的相对, 固定或绝对。jQuery animate()方法使用多个属性你可以使用多个属性同时设置动画。

< !DOCTYPE html> < html> < head> < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.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> Start Animation< /button> < div style="background:#125f21; height:100px; width:100px; position:absolute; "> < /div> < /body> < /html>

立即测试
输出：
开始动画
jQuery animate()方法使用相对值你还可以通过在值前面加上+ =或-=来定义相对值（相对于元素的当前值）。

< !DOCTYPE html> < html> < head> < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> < /script> < script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' }); }); }); < /script> < /head> < body> < button> Start Animation< /button> < div style="background:#98bf21; height:100px; width:100px; position:absolute; "> < /div> < /body> < /html>

立即测试
输出：
开始动画
使用预定义值的jQuery animate()方法你还可以将属性的动画值指定为“ show”, “ hide”或“ toggle”。
在此示例中, 我们使用“ toggle”值表示高度, 这表示它将显示/隐藏所选元素。

< !DOCTYPE html> < html> < head> < script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> < /script> < script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height: 'toggle' }); }); }); < /script> < /head> < body> < button> Start Animation< /button> < div style="background:#98bf21; height:100px; width:100px; position:absolute; "> < /div> < /body> < /html>

立即测试
输出：
开始动画
jQuery Color动画你还可以为颜色之间的元素设置动画。

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> jQuery UI Effects - Animate demo< /title> < link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> < script src="http://img.readke.com/220429/1JI533W-4.jpg"> < /script> < script src="http://img.readke.com/220429/1JI52b5-5.jpg"> < /script> < style> .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } #effect h3 { margin: 0; padding: 0.4em; text-align: center; } < /style> < script> $(function() { var state = true; $( "#button" ).click(function() { if ( state ) { $( "#effect" ).animate({ backgroundColor: "#aa0000", color: "#fff", width: 500 }, 1000 ); } else { $( "#effect" ).animate({ backgroundColor: "#fff", color: "#000", width: 240 }, 1000 ); } state = !state; }); }); < /script> < /head> < body> < div class="toggler"> < div id="effect" class="ui-widget-content ui-corner-all"> < h3 class="ui-widget-header ui-corner-all"> Animate< /h3> < p> srcmini.com is the best tutorial website to learn Java and other programming languages.< /p> < /div> < /div> < button id="button" class="ui-state-default ui-corner-all"> Toggle Effect< /button> < /body> < /html>

【jQuery animate()】立即测试