uTools-Manuals/docs/jQuery/fadeTo.html
2019-04-21 11:50:48 +08:00

261 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.fadeTo()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/effects/">特效</a> &gt; <a href="/category/effects/fading/">渐变</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/fadeTo/" target="_blank">.fadeTo()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="fadeTo1"><h2 class="section-title">
<span class="name">.fadeTo( duration, opacity [, complete ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>调整匹配元素的透明度。</p>
<ul class="signatures">
<li class="signature" id="fadeTo-duration-opacity-complete">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.fadeTo( duration, opacity [, complete ] )</h4>
<ul>
<li>
<div><strong>duration</strong></div>
<div>类型: <a href="/Types/#String,Number">String,Number</a>
</div>
<div>一个字符串或者数字决定动画将运行多久。</div>
</li>
<li>
<div><strong>opacity</strong></div>
<div>类型: <a href="/Types/#Number">Number</a>
</div>
<div>0和1之间的数字表示目标元素的不透明度。</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="fadeTo-duration-opacity-easing-complete">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>.fadeTo( duration, opacity [, easing ] [, complete ] )</h4>
<ul>
<li>
<div><strong>duration</strong></div>
<div>类型: <a href="/Types/#String,Number">String,Number</a>
</div>
<div>一个字符串或者数字决定动画将运行多久。</div>
</li>
<li>
<div><strong>opacity</strong></div>
<div>类型: <a href="/Types/#Number">Number</a>
</div>
<div>0和1之间的数字表示目标元素的不透明度。</div>
</li>
<li>
<div><strong>easing</strong></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>
</ul>
<div class="longdesc" id="entry-longdesc">
<p><code>.fadeTo()</code> 方法通过匹配元素的不透明度做动画效果。</p>
<p>延时时间是以毫秒为单位的,数值越大,动画越慢,不是越快。字符串 <code>'fast'</code><code>'slow'</code> 分别代表200和600毫秒的延时。如果提供任何其他字符串或者这个<code>duration</code>参数被省略,那么默认使用<code>400</code>毫秒的延时。和其他效果方法不同,<code>.fadeTo()</code>需要明确的指定<code>duration</code>参数。</p>
<p>如果提供回调函数参数,回调函数会在动画完成的时候调用。这个对于将不同的动画串联在一起按顺序排列是非常有用的。这个回调函数不设置任何参数,但是<code>this</code>指向执行动画的DOM元素。如果多个元素一起做动画效果值得注意的是这个回调函数在每个匹配元素上执行一次。这个动画不是作为一个整体。</p>
<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>
<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="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> /&gt;</span></code></div></div><div class="container"><div class="line"><code> With the element initially shown, we can dim it slowly:</code></div></div><div class="container"><div class="line"><code> $('#clickme').click(function() {</code></div></div><div class="container"><div class="line"><code> $('#book').fadeTo('slow', 0.5, function() {</code></div></div><div class="container"><div class="line"><code> // Animation complete.</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 four-across">
<img alt="" src="/resources/0042_06_41.png"/>
<img alt="" src="/resources/0042_06_42.png"/>
<img alt="" src="/resources/0042_06_43.png"/>
<img alt="" src="/resources/0042_06_44.png"/>
</p>
<p><code>duration</code>设置为<code>0</code>,这个方法只是改变<code>opacity</code> CSS属性所以<code>.fadeTo(0, opacity)</code><code>.css('opacity', opacity)</code>是一样的效果。</p>
</div>
<h3>Additional Notes:(其他注意事项:)</h3>
<div class="longdesc"><ul><li>
所有jQuery效果包括<code>.fadeTo()</code>,都能通过设置<code>jQuery.fx.off = true</code>全局的关闭效果等同于持续时间设置为0。更多信息查看 <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">把第一个段落的透明度渐变成 0.33 (33%,大约三分之一透明度), 用时 600 毫秒。</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>
</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">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">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>Click this paragraph to see it fade.</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">p</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></code></div></div><div class="container"><div class="line"><code>Compare to this one that won't fade.</code></div></div><div class="container"><div class="line"><code><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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p:first"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>$(<span class="keyword">this</span>).fadeTo(<span class="string">"slow"</span>, <span class="number">0.33</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 渐变成随机透明度,用时 200 毫秒。</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>
</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">p</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">80</span>px;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span>;</span></span> <span class="rule"><span class="attribute">padding</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">position</span>:<span class="value">absolute;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span><span class="id">#one</span> <span class="rules">{ <span class="rule"><span class="attribute">top</span>:<span class="value"><span class="number">0</span>;</span></span> <span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">0</span>;</span></span> <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#f00</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span><span class="id">#two</span> <span class="rules">{ <span class="rule"><span class="attribute">top</span>:<span class="value"><span class="number">20</span>px;</span></span> <span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">20</span>px;</span></span> <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#0f0</span>;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span><span class="id">#three</span> <span class="rules">{ <span class="rule"><span class="attribute">top</span>:<span class="value"><span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#00f</span>;</span></span> <span class="rule">}</span></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">p</span>&gt;</span>And this is the library that John built...<span class="tag">&lt;/<span class="title">p</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">"one"</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">id</span>=<span class="value">"two"</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">id</span>=<span class="value">"three"</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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>$(<span class="keyword">this</span>).fadeTo(<span class="string">"fast"</span>, Math.random());</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">找到正确答案!渐变耗时 250 毫秒,并且在完成后改变字体样式。</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>
</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="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">80</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">top</span>:<span class="value"><span class="number">0</span>;</span></span> <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">0</span>;</span></span></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> <span class="rule"><span class="attribute">padding-top</span>:<span class="value"><span class="number">8</span>px;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value"><span class="hexcolor">#fcc</span>;</span></span> <span class="rule"><span class="attribute">text-align</span>:<span class="value">center;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">blue;</span></span> <span class="rule">}</span></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">p</span>&gt;</span>Wrong<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>&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">p</span>&gt;</span>Wrong<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>&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">p</span>&gt;</span>Right!<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>&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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> getPos = <span class="function"><span class="keyword">function</span> <span class="params">(n)</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">return</span> (Math.floor(n) * <span class="number">90</span>) + <span class="string">"px"</span>;</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"p"</span>).each(<span class="function"><span class="keyword">function</span> <span class="params">(n)</span> {</span></code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> r = Math.floor(Math.random() * <span class="number">3</span>);</code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> tmp = $(<span class="keyword">this</span>).text();</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).text($(<span class="string">"p:eq("</span> + r + <span class="string">")"</span>).text());</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"p:eq("</span> + r + <span class="string">")"</span>).text(tmp);</code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).css(<span class="string">"left"</span>, getPos(n));</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).each(<span class="function"><span class="keyword">function</span> <span class="params">(n)</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).css(<span class="string">"left"</span>, getPos(n));</code></div></div><div class="container"><div class="line"><code>})</code></div></div><div class="container"><div class="line"><code>.css(<span class="string">"cursor"</span>, <span class="string">"pointer"</span>)</code></div></div><div class="container"><div class="line"><code>.click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).fadeTo(<span class="number">250</span>, <span class="number">0.25</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="keyword">this</span>).css(<span class="string">"cursor"</span>, <span class="string">""</span>)</code></div></div><div class="container"><div class="line"><code> .prev().css({<span class="string">"font-weight"</span>: <span class="string">"bolder"</span>,</code></div></div><div class="container"><div class="line"><code> <span class="string">"font-style"</span>: <span class="string">"italic"</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><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></section>
</div></article> </div>
</article>