jQuery 抄袭笔记(17) :Animate()
19 Oct 2011摘自w3school：
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。
使用 “+=” 或 “-=” 来创建相对动画（relative animations）。
1.$(selector).animate(styles,speed,easing,callback)
2.$(selector).animate(styles,options)
01 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
02 <html xmlns=“http://www.w3.org/1999/xhtml”>
03 </span>
04 <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
05</span>Hello Lazynight~<span style="color: #ff4400; font-weight: bold;"></title></span><br /> <span style="color: #696969;">06</span> <span style="color: #ff4400; font-weight: bold;"><script </span><span style="color: #ffff00;">type=</span><span style="color: #d13800;">“text/javascript”</span> <span style="color: #ffff00;">src=</span><span style="color: #d13800;">“jquery-1.1.3.pack.js”</span><span style="color: #ff4400; font-weight: bold;">></script></span><br /> <span style="color: #696969;">07</span> <span style="color: #ff4400; font-weight: bold;"><script </span><span style="color: #ffff00;">type=</span><span style="color: #d13800;">“text/javascript”</span><span style="color: #ff4400; font-weight: bold;">></span><br /> <span style="color: #696969;">08</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #c0c0c0;">document</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">ready</span>(<span style="color: #ff4400; font-weight: bold;">function</span><span style="color: #c0c0c0;">(){</span><br /> <span style="color: #696969;">09</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #d13800;">“a”</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">toggle</span>(<span style="color: #ff4400; font-weight: bold;">function</span><span style="color: #c0c0c0;">(){</span><br /> <span style="color: #f810b0;">10</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #d13800;">“.lazy”</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">animate</span><span style="color: #c0c0c0;">({</span><br /> <span style="color: #696969;">11</span> <span style="color: #c0c0c0;">height</span><span style="color: #c0c0c0;">:</span><span style="color: #d13800;">‘hide’</span><span style="color: #c0c0c0;">,</span><span style="color: #c0c0c0;">opacity</span><span style="color: #c0c0c0;">:</span><span style="color: #d13800;">‘hide’</span><span style="color: #c0c0c0;">},</span><span style="color: #d13800;">‘fast’</span><span style="color: #c0c0c0;">);}</span><br /> <span style="color: #696969;">12</span> <span style="color: #c0c0c0;">,</span><span style="color: #ff4400; font-weight: bold;">function</span><span style="color: #c0c0c0;">(){</span><br /> <span style="color: #696969;">13</span> <span style="color: #c0c0c0;">$</span>(<span style="color: #d13800;">“.lazy”</span><span style="color: #c0c0c0;">).</span><span style="color: #c0c0c0;">animate</span><span style="color: #c0c0c0;">({</span><br /> <span style="color: #696969;">14</span> <span style="color: #c0c0c0;">height</span><span style="color: #c0c0c0;">:</span><span style="color: #d13800;">‘show’</span><span style="color: #c0c0c0;">,</span><span style="color: #c0c0c0;">opacity</span><span style="color: #c0c0c0;">:</span><span style="color: #d13800;">‘show’</span><span style="color: #c0c0c0;">},</span><span style="color: #d13800;">‘fast’</span>);<br /> <span style="color: #f810b0;">15</span> <span style="color: #c0c0c0;">});</span><br /> <span style="color: #696969;">16</span> <span style="color: #c0c0c0;">});</span><br /> <span style="color: #696969;">17</span> <span style="color: #ff4400; font-weight: bold;"></script></span><br /> <span style="color: #696969;">18</span> <span style="color: #ff4400; font-weight: bold;"></head></span><br /> <span style="color: #696969;">19</span> <span style="color: #ff4400; font-weight: bold;"><body></span><br /> <span style="color: #f810b0;">20</span> <span style="color: #ff4400; font-weight: bold;"><a></span>点我测试~~<span style="color: #ff4400; font-weight: bold;"></a></span><br /> <span style="color: #696969;">21</span> <span style="color: #ff4400; font-weight: bold;"><div</span> <span style="color: #ffff00;">class=</span><span style="color: #d13800;">“lazy”</span><span style="color: #ff4400; font-weight: bold;">></span><br /> <span style="color: #696969;">22</span> <span style="color: #ff4400; font-weight: bold;"><pre></span><br /> <span style="color: #696969;">23</span> 用于创建自定义动画的函数。<br /> <span style="color: #696969;">24</span> 这个函数的关键在于指定动画形式及结果样式属性对象<br /> <span style="color: #f810b0;">25</span> 。<br /> <span style="color: #696969;">26</span> 这个对象中每个属性都表示一个可以变化的样式属性（如"height"、"top"或"opacity"）。<br /> <span style="color: #696969;">27</span><br /> <span style="color: #696969;">28</span> 而每个属性的值表示这个样式属性到多少时动画结束。<br /> <span style="color: #696969;">29</span> 如果是一个数值，样式属性就会从当前的值渐变到指定的值。<br /> <span style="color: #f810b0;">30</span> 如果使用的是"hide"、"show"或"toggle"这样的字符串值，<br /> <span style="color: #696969;">31</span> 则会为该属性调用默认的动画形式。<br /> <span style="color: #696969;">32</span><br /> <span style="color: #696969;">33</span> toggle是轮换的意思<br /> <span style="color: #696969;">34</span> 相当于hide or show<br /> <span style="color: #f810b0;">35</span> 也就是说如果p是隐藏的就让它显示 如果是显示的就让它隐藏<br /> <span style="color: #696969;">36</span> 当然这个显示与隐藏是相对height的属性的<br /> <span style="color: #696969;">37</span> 是通过调整元素的height属性来显示和隐藏元素<br /> <span style="color: #696969;">38</span> [示例]:<br /> <span style="color: #696969;">39</span> $(“p”).animate({<br /> <span style="color: #f810b0;">40</span> height: ‘toggle’, opacity: ‘toggle’<br /> <span style="color: #696969;">41</span> }, “slow”);<br /> <span style="color: #696969;">42</span> [示例]:<br /> <span style="color: #696969;">43</span> $(“p”).animate({<br /> <span style="color: #696969;">44</span> left: 50, opacity: ‘show’<br /> <span style="color: #f810b0;">45</span> }, 500);<br /> <span style="color: #696969;">46</span> [示例]:<br /> <span style="color: #696969;">47</span> 一个使用"擦除"函数提供不同动画样式的例子。<br /> <span style="color: #696969;">48</span> 只有在一个插件可以提供这个"擦除"函数（jQuery库中默认只提供"linear"函数）的情况下才有效。<br /> <span style="color: #696969;">49</span><br /> <span style="color: #f810b0;">50</span> $(“p”).animate({<br /> <span style="color: #696969;">51</span> opacity: ‘show’<br /> <span style="color: #696969;">52</span> }, “slow”, “easein”);<br /> <span style="color: #696969;">53</span><br /> <span style="color: #696969;">54</span><br /> <span style="color: #f810b0;">55</span> <span style="color: #ff4400; font-weight: bold;"></pre></span><br /> <span style="color: #696969;">56</span> <span style="color: #ff4400; font-weight: bold;"></div></body></span><br /> <span style="color: #696969;">57</span> <span style="color: #ff4400; font-weight: bold;"></html></span>
</div>
<span style="color: #ff6600;"><a href="http://down.qiannao.com/space/file/flowerowl/-4e0a-4f20-5206-4eab/Lazy17_Animate().rar/.page" target="_blank"><span style="color: #ff6600;">下载源码</span></a></span>
转载请注明：[于哲的博客][1] » [jQuery 抄袭笔记(17) :Animate()][2]
[1]: http://lazynight.me
[2]: http://lazynight.me/564.html
</pre></span></a></span></body></span>
02 <html xmlns=“http://www.w3.org/1999/xhtml”>
03 </span>
04 <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
05