uTools-Manuals/docs/jQuery/animate.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.animate()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/effects/">特效</a> &gt; <a href="/category/effects/custom-effects/">自定义</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/animate/" target="_blank">.animate()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="animate1"><h2 class="section-title">
<span class="name">.animate( properties [, duration ] [, easing ] [, complete ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>根据一组 CSS 属性，执行自定义动画。</p>
<ul class="signatures">
<li class="signature" id="animate-properties-duration-easing-complete">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.animate( properties [, duration ] [, easing ] [, complete ] )</h4>
<ul>
<li>
<div><strong>properties</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个CSS属性和值的对象,动画将根据这组对象移动。</div>
</li>
<li>
<div>
<strong>duration</strong> (默认: <code>400</code>)</div>
<div>类型: <a href="/Types/#Number">Number</a> or <a href="/Types/#String">String</a>
</div>
<div>
			一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000)
			 ）</div>
</li>
<li>
<div>
<strong>easing</strong> (默认: <code>swing</code>)</div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）</div>
</li>
<li>
<div><strong>complete</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>在动画完成时执行的函数。</div>
</li>
</ul>
</li>
<li class="signature" id="animate-properties-options">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.animate( properties, options )</h4>
<ul>
<li>
<div><strong>properties</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一个CSS属性和值的对象,动画将根据这组对象移动。</div>
</li>
<li>
<div><strong>options</strong></div>
<div>类型: <a href="/Types/#PlainObject">PlainObject</a>
</div>
<div>一组包含动画选项的值的集合。 支持的选项:</div>
<ul>
<li>
<div>
<strong>duration</strong> (default: <code>400</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types/#Number">Number</a> or <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>一个字符串或者数字决定动画将运行多久。（注：默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）</div>
</li>
<li>
<div>
<strong>easing</strong> (default: <code>swing</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>一个字符串，表示过渡使用哪种缓动函数。（注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>插件）</div>
</li>
<li>
<div>
<strong>queue</strong> (default: <code>true</code>)</div>
<div>Type: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a> or <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>
			
			一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 <strong>从jQuery1.7开始</strong>，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用<code>.dequeue("queuename")</code>来启动它。
			
			</div>
</li>
<li>
<div><strong>specialEasing</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#PlainObject">PlainObject</a>
</div>
<div>由此方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map。(  <a href="/category/version/1.4/">1.4</a> 新增)
			</div>
</li>
<li>
<div><strong>step</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Number">Number</a> now, <a href="http://api.jquery.com/Types/#Tween">Tween</a> tween )</div>
<div>
			每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。</div>
</li>
<li>
<div><strong>progress</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Promise">Promise</a> animation, <a href="http://api.jquery.com/Types/#Number">Number</a> progress, <a href="http://api.jquery.com/Types/#Number">Number</a> remainingMs )</div>
<div>
			每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。<span class="version-details"> (version added: <a href="/category/version/1.8/">1.8</a>)</span>
</div>
</li>
<li>
<div><strong>complete</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
<div>在动画完成时执行的函数。</div>
</li>
<li>
<div><strong>done</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Promise">Promise</a> animation, <a href="http://api.jquery.com/Types/#Boolean">Boolean</a> jumpedToEnd )</div>
<div>在动画完成时执行的函数。 (他的Promise对象状态已完成).<span class="version-details"> (version added: <a href="/category/version/1.8/">1.8</a>)</span>
</div>
</li>
<li>
<div><strong>fail</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Promise">Promise</a> animation, <a href="http://api.jquery.com/Types/#Boolean">Boolean</a> jumpedToEnd )</div>
<div>
			动画失败完成时执行的函数。(他的Promise对象状态未完成)。<span class="version-details"> (version added: <a href="/category/version/1.8/">1.8</a>)</span>
</div>
</li>
<li>
<div><strong>always</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>( <a href="http://api.jquery.com/Types/#Promise">Promise</a> animation, <a href="http://api.jquery.com/Types/#Boolean">Boolean</a> jumpedToEnd )</div>
<div>
			在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。<span class="version-details"> (version added: <a href="/category/version/1.8/">1.8</a>)</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>
<code>.animate()</code>方法允许我们在任意的数值的CSS属性上创建动画。唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置<code>.css()</code>方法的属性键值对类似，除了属性范围做了更多限制。</p>
<h4 id="animation-properties">Animation Properties and Values(动画属性和值)</h4>
<p>所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。（例如，<code>width</code>, <code>height</code>或者<code>left</code>可以执行动画，但是<code>background-color</code>不能，除非使用<a href="https://github.com/jquery/jquery-color">jQuery.Color()</a>插件。）属性值的单位像素（px）,除非另有说明。单位<code>em</code> 和 <code>%</code>需要指定使用。</p>
<p>除了样式属性，
			一些非样式的属性，如<code>scrollTop</code> 和 <code>scrollLeft</code>，以及自定义属性，也可应用于动画。</p>
<p>
			      CSS简写属性（例如font, background, border）没有得到充分的支持。例如，
			如果你想边框宽度做动画呈现，至少边框样式和边框宽度必须预先设定不为"auto" 。或者，如果你想字体大小做动画，
			你可以使用<code>fontSize</code>的或相当于CSS的 <code>'font-size'</code> ，而不是简单的<code>'font'</code>。</p>
<p>除了定义数值，每个属性能使用<code>'show'</code>, <code>'hide'</code>, 和 <code>'toggle'</code>。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。为了使用jQuery内置的切换状态跟踪，<code>'toggle'</code>关键字必须在动画开始前给定属性值。（注：jquery中有两个.toggle()方法，一个是显示或隐藏匹配元素。另一个是绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。哪一个被调用取决于传递的参数的设置。所以这里<code>'toggle'</code>关键字必须在动画开始前给定属性值，以确认调用哪个<code>'toggle'</code>方法。）</p>
<p>动画属性也可以是一个相对值。如果提供一个以<code>+=</code> 或 <code>-=</code>开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的。</p>
<blockquote>
<p><strong>注意:</strong> 
			        不同于动画的简便方法，比如<code>.slideDown()</code> 和 <code>.fadeIn()</code>,<code>.animate()</code>方法不会影响隐藏元素的可见性部分的效果。例如，给定<code>$('someElement').hide().animate({height:'20px'}, 500)</code>，动画将执行，但<em>该元素将保持隐藏</em>。</p>
</blockquote>
<h4 id="duration">Duration（持续时间）</h4>
<p>持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供<code>'fast'</code> 和 <code>'slow'</code>字符串，分别表示持续时间为<code>200</code> 和 <code>600</code>毫秒。</p>
<h4 id="complete">Complete Function（完成函数）</h4>
<p>如果提供<code>complete</code>回调函数将在动画完成后被执行一次。这对于按顺序执行一系列不同动画时，特别有用。这个回调函数不设置任何参数，但是<code>this</code>会被传递到正在执行动画的DOM元素上，如果多个元素一起做动画效果，值得注意的是这个回调函数在每个匹配元素上执行一次，不是这个动画作为一个整体。
			</p>
<h4 id="basic-usage">Basic Usage（基本用法）</h4>
<p>我们可以为任何元素做动画，比如这样的一个简单图片：</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"clickme"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  Click here</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">img</span> <span class="attribute">id</span>=<span class="value">"book"</span> <span class="attribute">src</span>=<span class="value">"book.png"</span> <span class="attribute">alt</span>=<span class="value">""</span> <span class="attribute">width</span>=<span class="value">"100"</span> <span class="attribute">height</span>=<span class="value">"123"</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="attribute">style</span>=<span class="value">"position: relative; left: 10px;"</span> /&gt;</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>同时对透明度，左偏移值和高度应用动画：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#clickme'</span>).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">'#book'</span>).animate({</code></div></div><div class="container"><div class="line"><code>    opacity: <span class="number">0.25</span>,</code></div></div><div class="container"><div class="line"><code>    left: <span class="string">'+=50'</span>,</code></div></div><div class="container"><div class="line"><code>    height: <span class="string">'toggle'</span></code></div></div><div class="container"><div class="line"><code>  }, <span class="number">5000</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>    <span class="comment">// Animation complete.</span></code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p class="image">
<img alt="" src="/resources/animate-1.jpg"/>
</p>
<p>注意我们这里给定了<code>toggle</code>作为<code>height</code>属性的目标值。由于这个图片开始是可见的，这个动画将收缩高度至0隐藏这个图片。第二次点击的时候将相反的转变：
			</p>
<p class="image">
<img alt="" src="/resources/animate-2.jpg"/>
</p>
<p>这个图片的<code>opacity</code>已经是其目标值了，所以这个属性在第二次点击的时候不会有动画效果。由于我们给定了<code>left</code>目标值作为相对值，在第二次动画中图片将向右移动得更远。</p>
<p>如果元素的定位属性是静态的，即 <code>position</code>样式属性是<code>static</code>默认值，那么他们的定位属性（<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>)没有明显的效果。</p>
<blockquote>
<p><strong>注意: </strong><a href="http://jqueryui.com">jQuery UI</a>项目扩展了<code>.animate()</code>方法，允许一些非数值的样式，比如颜色，应用动画。该项目还包括通过CSS classes来指定动画的机制而不是单独的属性。</p>
</blockquote>
<blockquote>
<p><strong>注意:</strong> 
			如果试图将元素高度或宽度动画至 0px，元素的内容是可见的，可能在动画中溢出。通过固定原始元素的尺寸，隐藏内容解决。这样可以确保动画平稳运行。一个<a href="http://www.google.com/search?q=clearfix">clearfix</a> 可以用来自动修复您的主要元素的尺寸，而无需手动设置。</p>
</blockquote>
<h4 id="step">Step Function</h4>
<p>第二个版本的<code>.animate()</code>提供了一个<code>step</code>选项- 每步动画执行后调用的回调函数。启用自定义动画类型或改变正在执行的动画，此功能是非常有用。它接受两个参数（<code>now</code> 和 <code>fx</code>），<code>this</code>是当前正在执行动画的DOM元素集合。
			</p>
<ul>
<li>
<code>now</code>: 
			每一步动画属性的数字值</li>
<li>
<code>fx</code>: <code>jQuery.fx</code> 原型对象的一个引用，其中包含了多项属性，比如<code>elem</code> 表示前正在执行动画的元素，<code>start</code>和<code>end</code>分别为动画属性的第一个和最后一个的值，<code>prop</code>为进行中的动画属性。</li>
</ul>
<p>需要注意的是<code>step</code>函数被每个动画元素的每个动画属性调用。例如，给定两个列表项，<code>step</code>函数会被激发四次：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'li'</span>).animate({</code></div></div><div class="container"><div class="line"><code>  opacity: <span class="number">.5</span>,</code></div></div><div class="container"><div class="line"><code>  height: <span class="string">'50%'</span></code></div></div><div class="container"><div class="line"><code>},</code></div></div><div class="container"><div class="line"><code>{</code></div></div><div class="container"><div class="line"><code>  step: <span class="keyword">function</span>(now, fx) {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> data = fx.elem.id + <span class="string">' '</span> + fx.prop + <span class="string">': '</span> + now;</code></div></div><div class="container"><div class="line"><code>    $(<span class="string">'body'</span>).append(<span class="string">'&lt;div&gt;'</span> + data + <span class="string">'&lt;/div&gt;'</span>);</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="easing">Easing（缓动）</h4>
<p><code>.animate()</code>还有一个参数是一个字符串命名的使用缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。 在jQuery库中是默认的时调用 <code>swing</code>。在一个恒定的速度进行动画，请调用 <code>linear</code>. 更多的缓动函数要使用的插件，最显着的是<a href="http://jqueryui.com/">jQuery UI suite</a>（译者注：或<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>插件）。</p>
<h4 id="per-property-easing">Per-property Easing</h4>
<p>从jQuery 1.4 版本开始，我们能设置per-property 缓存函数访问一个单独的<code>.animate()</code>。在<code>.animate()</code>的第一个版本中，每个属性能获取一个数组作为他的值：数组的第一个成员是CSS属性，第二成员缓冲函数。如果为某个属性指定的缓冲函数尚未被定义，那么将会使用<code>.animate()</code>  方法的 easing 参数来代替。如果 easing 参数也未被定义，那么将会使用默认的缓冲函数 <code>swing</code>。</p>
<p>例如, 我们可以同时的使用<code>swing</code>缓冲函数来做width 和 height动画，并且用<code>linear</code>缓冲函数来做opacity动画：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#clickme'</span>).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">'#book'</span>).animate({</code></div></div><div class="container"><div class="line"><code>    width: [<span class="string">'toggle'</span>, <span class="string">'swing'</span>],</code></div></div><div class="container"><div class="line"><code>    height: [<span class="string">'toggle'</span>, <span class="string">'swing'</span>],</code></div></div><div class="container"><div class="line"><code>    opacity: <span class="string">'toggle'</span></code></div></div><div class="container"><div class="line"><code>  }, <span class="number">5000</span>, <span class="string">'linear'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>      $(<span class="keyword">this</span>).after(<span class="string">'&lt;div&gt;Animation complete.&lt;/div&gt;'</span>);</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>在<code>.animate()</code>的第二个版本中，选项对象能包含<code>specialEasing</code>属性，该属性本身是一组CSS属性与相应的缓冲函数。例如，我们可以同时的使用<code>linear</code>缓冲函数来做width动画，并且用<code>easeOutBounce</code>缓冲函数来做height动画：
			
			</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#clickme'</span>).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">'#book'</span>).animate({</code></div></div><div class="container"><div class="line"><code>    width: <span class="string">'toggle'</span>,</code></div></div><div class="container"><div class="line"><code>    height: <span class="string">'toggle'</span></code></div></div><div class="container"><div class="line"><code>  }, {</code></div></div><div class="container"><div class="line"><code>    duration: <span class="number">5000</span>,</code></div></div><div class="container"><div class="line"><code>    specialEasing: {</code></div></div><div class="container"><div class="line"><code>      width: <span class="string">'linear'</span>,</code></div></div><div class="container"><div class="line"><code>      height: <span class="string">'easeOutBounce'</span></code></div></div><div class="container"><div class="line"><code>    },</code></div></div><div class="container"><div class="line"><code>    complete: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>      $(<span class="keyword">this</span>).after(<span class="string">'&lt;div&gt;Animation complete.&lt;/div&gt;'</span>);</code></div></div><div class="container"><div class="line"><code>    }</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>如前所述,<code>easeOutBounce</code> 函数是一个极其必要的插件。</p>
</div>
<h3>Additional Notes:（其他注意事项：）</h3>
<div class="longdesc"><ul>
<li>所有的jQuery效果，包括<code>.animate()</code>,能使用<code>jQuery.fx.off = true</code>来全局性关闭。更多信息请查看<a href="/jquery.fx.off">jQuery.fx.off</a>.</li>
</ul></div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">点击按钮，根据指定的一系列属性，在 div 上应用动画。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">background-color</span>:<span class="value"><span class="hexcolor">#bca</span>;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">100</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">border</span>:<span class="value"><span class="number">1</span>px solid green;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"go"</span>&gt;</span>&amp;raquo; Run<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"block"</span>&gt;</span>Hello!<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">/* Using multiple unit types within one animation. */</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#go"</span>).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"#block"</span>).animate({</code></div></div><div class="container"><div class="line"><code>    width: <span class="string">"70%"</span>,</code></div></div><div class="container"><div class="line"><code>    opacity: <span class="number">0.4</span>,</code></div></div><div class="container"><div class="line"><code>    marginLeft: <span class="string">"0.6in"</span>,</code></div></div><div class="container"><div class="line"><code>    fontSize: <span class="string">"3em"</span>,</code></div></div><div class="container"><div class="line"><code>    borderWidth: <span class="string">"10px"</span></code></div></div><div class="container"><div class="line"><code>  }, <span class="number">1500</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">对 div 应用动画，在 left 属性上使用相对值。执行动画多次，查看相对值的累加效果。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">position</span>:<span class="value">absolute;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">background-color</span>:<span class="value"><span class="hexcolor">#abc</span>;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">50</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">90</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">90</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"left"</span>&gt;</span>&amp;laquo;<span class="tag">&lt;/<span class="title">button</span>&gt;</span> <span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"right"</span>&gt;</span>&amp;raquo;<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#right"</span>).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">".block"</span>).animate({<span class="string">"left"</span>: <span class="string">"+=50px"</span>}, <span class="string">"slow"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#left"</span>).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">".block"</span>).animate({<span class="string">"left"</span>: <span class="string">"-=50px"</span>}, <span class="string">"slow"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">第一个按钮要执行的动画中，使用了 queue: false 选项，该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了，边框的动画就会开始。 第二个按钮要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</div>
<div class="line n46">46</div>
<div class="line n47">47</div>
<div class="line n48">48</div>
<div class="line n49">49</div>
<div class="line n50">50</div>
<div class="line n51">51</div>
<div class="line n52">52</div>
<div class="line n53">53</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">background-color</span>:<span class="value"><span class="hexcolor">#bca</span>;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">200</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">1.1</span>em;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">text-align</span>:<span class="value">center;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">border</span>:<span class="value"><span class="number">2</span>px solid green;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">3</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">14</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">button</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">14</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"go1"</span>&gt;</span>&amp;raquo; Animate Block1<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"go2"</span>&gt;</span>&amp;raquo; Animate Block2<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"go3"</span>&gt;</span>&amp;raquo; Animate Both<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"go4"</span>&gt;</span>&amp;raquo; Reset<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"block1"</span>&gt;</span>Block1<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"block2"</span>&gt;</span>Block2<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#go1"</span> ).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  $( <span class="string">"#block1"</span> ).animate( { width: <span class="string">"90%"</span> }, { queue: <span class="literal">false</span>, duration: <span class="number">3000</span> })</code></div></div><div class="container"><div class="line"><code>     .animate({ fontSize: <span class="string">"24px"</span> }, <span class="number">1500</span> )</code></div></div><div class="container"><div class="line"><code>     .animate({ borderRightWidth: <span class="string">"15px"</span> }, <span class="number">1500</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#go2"</span> ).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  $( <span class="string">"#block2"</span> ).animate({ width: <span class="string">"90%"</span> }, <span class="number">1000</span> )</code></div></div><div class="container"><div class="line"><code>     .animate({ fontSize: <span class="string">"24px"</span> }, <span class="number">1000</span> )</code></div></div><div class="container"><div class="line"><code>     .animate({ borderLeftWidth: <span class="string">"15px"</span> }, <span class="number">1000</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#go3"</span> ).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  $( <span class="string">"#go1"</span> ).add( <span class="string">"#go2"</span> ).click();</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#go4"</span> ).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  $( <span class="string">"div"</span> ).css({ width: <span class="string">""</span>, fontSize: <span class="string">""</span>, borderWidth: <span class="string">""</span> });</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">对第一个 div 的 left 属性应用动画，在动画执行的过程中，在 step 函数中改变其余 div 的 left 属性。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code>   <span class="rule"><span class="attribute">position</span>:<span class="value"> relative;</span></span></code></div></div><div class="container"><div class="line"><code>   <span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#abc</span>;</span></span></code></div></div><div class="container"><div class="line"><code>   <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">40</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>   <span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">40</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>   <span class="rule"><span class="attribute">float</span>:<span class="value"> left;</span></span></code></div></div><div class="container"><div class="line"><code>   <span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">5</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">p</span>&gt;</span><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"go"</span>&gt;</span>Run »<span class="tag">&lt;/<span class="title">button</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span> <span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"#go"</span> ).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>  $( <span class="string">".block:first"</span> ).animate({</code></div></div><div class="container"><div class="line"><code>    left: <span class="number">100</span></code></div></div><div class="container"><div class="line"><code>  }, {</code></div></div><div class="container"><div class="line"><code>    duration: <span class="number">1000</span>,</code></div></div><div class="container"><div class="line"><code>    step: <span class="keyword">function</span>( now, fx ){</code></div></div><div class="container"><div class="line"><code>      $( <span class="string">".block:gt(0)"</span> ).css( <span class="string">"left"</span>, now );</code></div></div><div class="container"><div class="line"><code>    }</code></div></div><div class="container"><div class="line"><code>  });</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc">对所有段落的高和透明度使用 toggle 动画，用时 600 毫秒。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"p"</span> ).animate({</code></div></div><div class="container"><div class="line"><code>  height: <span class="string">"toggle"</span>, opacity: <span class="string">"toggle"</span></code></div></div><div class="container"><div class="line"><code>}, <span class="string">"slow"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-5">
<h4>Example: <span class="desc">对所有段落应用动画，使其 left 属性变为 50，透明度变为 1（即，不透明，可见），用时 500 毫秒。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"p"</span> ).animate({</code></div></div><div class="container"><div class="line"><code>  left: <span class="number">50</span>, opacity: <span class="number">1</span></code></div></div><div class="container"><div class="line"><code>}, <span class="number">500</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-6">
<h4>Example: <span class="desc">Animate the left and opacity style properties of all paragraphs; run the animation <em>outside</em> the queue, so that it will automatically start without waiting for its turn.</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"p"</span> ).animate({</code></div></div><div class="container"><div class="line"><code>  left: <span class="string">"50px"</span>, opacity: <span class="number">1</span></code></div></div><div class="container"><div class="line"><code>}, { duration: <span class="number">500</span>, queue: <span class="literal">false</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-7">
<h4>Example: <span class="desc">一个使用 'easing' 缓冲函数的例子，只要当你提供的插件中包含 easing 函数即可。注意，以下代码只能在处于隐藏的元素上才会看出效果。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"p"</span> ).animate({</code></div></div><div class="container"><div class="line"><code>  opacity: <span class="string">"show"</span></code></div></div><div class="container"><div class="line"><code>}, <span class="string">"slow"</span>, <span class="string">"easein"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-8">
<h4>Example: <span class="desc">对所有段落的高和透明度使用 toggle 动画，用时 600 毫秒。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"p"</span> ).animate({</code></div></div><div class="container"><div class="line"><code>  height: <span class="string">"toggle"</span>, opacity: <span class="string">"toggle"</span></code></div></div><div class="container"><div class="line"><code>}, { duration: <span class="string">"slow"</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-9">
<h4>Example: <span class="desc">一个使用 'easing' 缓冲函数的例子，只要当你提供的插件中包含 easing 函数即可。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"p"</span> ).animate({</code></div></div><div class="container"><div class="line"><code>  opacity: <span class="string">"show"</span></code></div></div><div class="container"><div class="line"><code>}, { duration: <span class="string">"slow"</span>, easing: <span class="string">"easein"</span> });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-10">
<h4>Example: <span class="desc">一个使用回调函数的例子。第一个参数是一个 CSS 属性数组，第二个参数表示动画耗时 1000 毫秒，第三个参数说明使用的是 easing 缓冲效果, 第四个参数是一个匿名的回调函数。 </span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"p"</span> ).animate({</code></div></div><div class="container"><div class="line"><code>  height: <span class="number">200</span>, width: <span class="number">400</span>, opacity: <span class="number">0.5</span></code></div></div><div class="container"><div class="line"><code>}, <span class="number">1000</span>, <span class="string">"linear"</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  alert(<span class="string">"all done"</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div></section>
</div></article> </div>
</article>