<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Bufa Webmaster &#187; fade</title>
	<atom:link href="http://www.bufa.es/tag/fade/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bufa.es</link>
	<description>Recursos web en español</description>
	<lastBuildDate>Thu, 09 Sep 2010 14:28:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Efecto fade jquery</title>
		<link>http://www.bufa.es/efecto-fade-jquery/</link>
		<comments>http://www.bufa.es/efecto-fade-jquery/#comments</comments>
		<pubDate>Sat, 14 Mar 2009 01:47:02 +0000</pubDate>
		<dc:creator>bufa</dc:creator>
				<category><![CDATA[JQuery]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[fade]]></category>

		<guid isPermaLink="false">http://www.bufa.es/?p=3</guid>
		<description><![CDATA[Vamos a ver un ejemplo sencillo de jquery para hacer un rollover de efecto transparencia en nuestras fotos. Creamos una nueva función, y aplicamos la función &#8220;fadeTo&#8221; al 0.3 en estado reposo (30% de opacidad) y al pasar el ratón ...]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-8" title="Efecto fade jquery" src="http://www.bufa.es/wp-content/uploads/2009/03/efecto-fade.jpg" alt="Efecto fade jquery" width="521" height="182" /></p>
<p>Vamos a ver un ejemplo sencillo de jquery para hacer un rollover de efecto transparencia en nuestras fotos.</p>
<p>Creamos una nueva función, y aplicamos la función &#8220;fadeTo&#8221; al 0.3 en estado reposo (30% de opacidad) y al pasar el ratón por encima aplicamos a la foto el 1 (100% de opacidad).</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.fadefoto&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.fadefoto&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hover</span><span style="color: #009900;">&#40;</span>
    <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;fast&quot;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;normal&quot;</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Y dentro del body de nuestra página, solo tenemos que aplicar el estilo que antes hemos creado para el efecto, en nuestro caso: &#8220;fadefoto&#8221; a la/s fotos que queremos aplicar el efecto de transparencia.</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;a&gt;&lt;img class=&quot;fadefoto&quot; src=&quot;mifoto.jpg&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.bufa.es/efecto-fade-jquery/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
