<?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>Vivenet &#187; html</title>
	<atom:link href="http://www.vivenet.es/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.vivenet.es</link>
	<description>Diseño de páginas web en Madrid</description>
	<lastBuildDate>Thu, 26 Aug 2010 12:08:18 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=abc</generator>
		<item>
		<title>Aparición consecutiva con jQuery</title>
		<link>http://www.vivenet.es/aparicion-consecutiva-con-jquery/</link>
		<comments>http://www.vivenet.es/aparicion-consecutiva-con-jquery/#comments</comments>
		<pubDate>Thu, 26 Aug 2010 12:05:01 +0000</pubDate>
		<dc:creator>Félix Blanco</dc:creator>
				<category><![CDATA[Maquetación web]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.vivenet.es/?p=465</guid>
		<description><![CDATA[Efecto muy llamativo. Aplica la aparición consecutiva, es decir, hasta que la anterior no haya terminado de aparecer no comienza a aparecer la siguiente, a todas las etiquetas contenidas dentro de una etiqueta padre. Hemos modificado el código original, añadiendo un if en la línea 16 para que no añada el efecto a etiquetas sin [...]


Related posts:<ol><li><a href='http://www.vivenet.es/menu-efecto-acordeon-con-jquery/' rel='bookmark' title='Permanent Link: Menú efecto acordeón con jQuery'>Menú efecto acordeón con jQuery</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Efecto muy llamativo. Aplica la aparición consecutiva, es decir, hasta que la anterior no haya terminado de aparecer no comienza a aparecer la siguiente, a todas las etiquetas contenidas dentro de una etiqueta padre. Hemos modificado el código original, añadiendo un if en la línea 16 para que no añada el efecto a etiquetas sin contenido como son las clear, ya que hacerlas desaparecer y luego aparecer provoca fallos en la maquetación.</p>
<h4>Código:</h4>
<pre class="brush: jscript;">
(function(jQuery) {
jQuery.fn.fadeInSequence = function(fadeInTime, timeBetween)
{
	//Default Values
	timeBetween = typeof(timeBetween) == 'undefined' ? 0 : timeBetween;
	 fadeInTime = typeof(fadeInTime) == 'undefined' ? 500 : fadeInTime;

	//The amount of remaining time until the animation is complete.
	//Initially set to the value of the entire animation duration.
	var remainingTime = jQuery(this).size() * (fadeInTime+timeBetween);

	var i=0; //Counter
	return jQuery(this).each(function()
	{
		//Para que no haga cosas raras con los clear
		if ( !jQuery(this).hasClass(&quot;clear&quot;) ){
				//Wait until previous element has finished fading and timeBetween has elapsed
				jQuery(this).delay(i++*(fadeInTime+timeBetween));

				//Decrement remainingTime
				remainingTime -= (fadeInTime+timeBetween);

				if(jQuery(this).css('display') == 'none')
				{
					jQuery(this).fadeIn(fadeInTime);
				}
				else //If hidden by other means such as opacity: 0
				{
					jQuery(this).animate({'opacity' : 1}, fadeInTime);
				}
				//Delay until the animation is over to fill up the queue.
				jQuery(this).delay(remainingTime+timeBetween);
		}
		else{
			jQuery(this).show();
		}
	});
};

})(jQuery);
</pre>
<h4>Llamada a la función:</h4>
<pre class="brush: jscript;">
$(&quot;wrapper p&quot;).fadeInSequence();             //Elementos dentro de wrapper p aparecerán sin pausa entre ellos durando 500ms su animación (valor por defecto).
$(&quot;wrapper p&quot;).fadeInSequence(1000);       //Elementos dentro de wrapper p aparecerán sin pausa entre ellos durando 1000ms su animación.
$(&quot;wrapper p&quot;).fadeInSequence(300, 500);  //Elementos dentro de wrapper p aparecerán con pausa de 500ms entre ellos durando 300ms su animación.
</pre>


<p>Related posts:<ol><li><a href='http://www.vivenet.es/menu-efecto-acordeon-con-jquery/' rel='bookmark' title='Permanent Link: Menú efecto acordeón con jQuery'>Menú efecto acordeón con jQuery</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.vivenet.es/aparicion-consecutiva-con-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Menú efecto acordeón con jQuery</title>
		<link>http://www.vivenet.es/menu-efecto-acordeon-con-jquery/</link>
		<comments>http://www.vivenet.es/menu-efecto-acordeon-con-jquery/#comments</comments>
		<pubDate>Thu, 17 Dec 2009 11:00:21 +0000</pubDate>
		<dc:creator>Félix Blanco</dc:creator>
				<category><![CDATA[Maquetación web]]></category>
		<category><![CDATA[diseño]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.vivenet.es/?p=448</guid>
		<description><![CDATA[A veces tenemos un menú tan grande que no &#8220;encaja&#8221; en nuestro diseño, o simplemente queremos añadir un efecto llamativo a nuestra navegación del sitio. Éste menú en acordeón necesita jQuery y pesa sólo 0.5KB. Soporta tantos niveles como sea necesario, links externos, información dentro del menú y es posible dejarlo abierto al navegar de [...]


Related posts:<ol><li><a href='http://www.vivenet.es/aparicion-consecutiva-con-jquery/' rel='bookmark' title='Permanent Link: Aparición consecutiva con jQuery'>Aparición consecutiva con jQuery</a></li>
<li><a href='http://www.vivenet.es/reemplazamiento-de-texto-con-cufon/' rel='bookmark' title='Permanent Link: Cambiar la fuente de html con Cufón'>Cambiar la fuente de html con Cufón</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>A veces tenemos un menú tan grande que no &#8220;encaja&#8221; en nuestro diseño, o simplemente queremos añadir un efecto llamativo a nuestra navegación del sitio.</p>
<p>Éste menú en acordeón necesita jQuery y pesa sólo 0.5KB. Soporta tantos niveles como sea necesario, links externos, información dentro del menú y es posible dejarlo abierto al navegar de una sección a otra. Ahora vemos cómo:</p>
<h4>Creamos nuestro menú:</h4>
<pre class="brush: xml;">
&lt;ul id=&quot;menu&quot;&gt;
    &lt;li&gt;
        &lt;a href=&quot;#primerElemento&quot;&gt;Primer elemento&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;Elemento hijo1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;Elemento hijo2&lt;/a&gt;
                &lt;div&gt;Podemos incluir información aquí&lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href=&quot;#segundoElemento&quot;&gt;Segundo elemento&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;Elemento hijo1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;Elemento hijo2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;Elemento hijo3&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</pre>
<h4><a href="http://jquery-accordion.googlecode.com/files/jquery.accordion-1.3.zip">Descargamos</a> y añadimos los archivos necesarios</h4>
<pre class="brush: xml;">
	&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.accordion.js&quot;&gt;&lt;/script&gt;
</pre>
<h4>Activamos el plugin</h4>
<pre class="brush: jscript;">
	$('#menu').accordion();
</pre>
<h3>¡Ya está!</h3>
<p><strong>NOTA:</strong> Si queremos que la pestaña de la sección quede abierta mientras estamos en una sección de su interior se debe añadir el href del elemento padre a la dirección del hijo de la siguiente forma:</p>
<pre class="brush: xml;">
&lt;ul id=&quot;menu&quot;&gt;
    &lt;li&gt;
        &lt;a href=&quot;#primerElemento&quot;&gt;Primer elemento&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;a href=&quot;elementohijo11.html#primerElemento&quot;&gt;Elemento hijo1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;elementohijo12.html#primerElemento&quot;&gt;Elemento hijo 2&lt;/a&gt;
                &lt;div&gt;Podemos incluir información aquí&lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href=&quot;#segundoElemento&quot;&gt;Segundo elemento&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;
                &lt;a href=&quot;elementohijo1.html#segundoElemento&quot;&gt;Elemento hijo1&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;elementohijo2.html#segundoElemento&quot;&gt;Elemento hijo2&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;elementohijo3.html#segundoElemento&quot;&gt;Elemento hijo3&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</pre>


<p>Related posts:<ol><li><a href='http://www.vivenet.es/aparicion-consecutiva-con-jquery/' rel='bookmark' title='Permanent Link: Aparición consecutiva con jQuery'>Aparición consecutiva con jQuery</a></li>
<li><a href='http://www.vivenet.es/reemplazamiento-de-texto-con-cufon/' rel='bookmark' title='Permanent Link: Cambiar la fuente de html con Cufón'>Cambiar la fuente de html con Cufón</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.vivenet.es/menu-efecto-acordeon-con-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

