JMiur [E]

Los efectos elementales para mostrar y ocultar elementos con JQuery son bastante similares a los que se aplican con Scriptaculous.

Hay ocho funciones que los controlan:

show() y hide() muestran y ocultan un elemento de manera simple
fadeIn() y fadeOut() lo muestran u ocultan con un efecto de fade
slideDown() y slideUp() lo muestran u ocultan con un efecto deslizante
toggle() permuta el estado de un elemento, si está oculto lo muestra y viceversa
slideToggle() hace lo mismo pero con un efecto deslizante

Para utilizarlos, debemos indicar dos cosas, el elemento sobre el cual se va a aplicar el efecto y el enlace que ejecutará la función. Ambos deberían ser identificados con un ID único. Por ejemplo:
<div id="nombreContenido"> ....... el contenido ....... </div>
<a href="javascript:void(0);" id="nombreEnlaceMostrar"> MOSTRAR </a>
<a href="javascript:void(0);" id="nombreEnlaceOcultar"> OCULTAR </a>
La función sería algo así:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").show(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").hide(); });
});
//]]>
</script>
Con el mismo tipo de sintaxis, podríamos utilizar los otros efectos:
$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").fadeIn(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").fadeOut(); });

$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").slideDown(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").slideUp(); });
Y en el caso de toggle sólo requerimos una instrucción:
$("#nombreEnlace").click(function () { $("#nombreContenido").toggle(); });
o bien:
$("#nombreEnlace").click(function () { $("#nombreContenido").slideToggle(); });

43 comentarios:

Jared  

esto se puede aplicar en cualquier widget de blogger?

Responder
CHiCken  

:o Otro gran tutorial como siempre, la vdd qe hace poco me tope con este fantastico jquery y me gusto mucho por lo que ace qe es increible, los efetos, animaciones, simplemente muy bueno :)

Responder
Cinedot  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Jared: Sí, a cualquiera, claro que habrña que ver cómo hacerlo en cada caso.

Cinedot: Eso es algo que deberás consultar con quien tengas registrado el dominio.

Responder
Dña. Urraca  

Hola capitan queria hacerte una consulta que no se por donde buscar, que seguro que ya has explicado algo así. ¿En que parte de la plantilla y como tengo que poner lo de (targer blank, para que cualquier enlace que ponga en una entrada se me abra en otra ventana?, es que de momento lo hago cada vez que pongo un enlace (y me acuerdo) y la verdad es muy pesado, si se pudiera dar la orden para que en lo sucesivo sea así estaria genial.

Responder
Cinedot  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Puede hacerse, fíjate en esta entrada pero ... siempre hay un pero, recomendaría no usarlo ya que eso afectará a todos los enlaces incluyendo aquellos que no abren direccioens URL sino que son parte de algún tipo de script.

Lo ideal, a mi juicio, es hacerlo manualmente :$

Responder
Isaias Arredondo  

Hola JMiur, explicas muy bien tus entradas, permiteme felicitarte, respecto al tema en cuestión tengo una duda, si quiero aplicar alguno de estos efectos pero que en lugar de darle clic sea con sólo pasar el mouse sobre el elemento, como debo hacerle?

Te agradezco de antemano.

Responder
JMiur  

Cinedot: Blogger no registra dominios, sólo te da acceso a servicios que lo hacen, fçijate en este foro.

Isaias: Si no me equivoco, en lugar de usar:
.click(function()
debe usarse:
.mouseover(function()

Responder
Cinedot  
Este comentario ha sido eliminado por el autor.
Responder
Rrc-tt  

En principio debo agradecerte todo lo que enseñas por lo menos para mi este blog es una fuente de inspiracion y de "codigos" me gusto mucho esto del jquery, ahora me he quedado con una duda; como debo hacer para que la div que tiene el contenido en un principio este oculto y si yo hago click sobre el enlace recien ahi aparesca. Desde ya muchas gracias!!

Responder
JMiur  

Dependerá del caso pero, en general, si quieres que aparezca oculto, lo que debe hacerse es agregarle el atributo style a la etiqueta:
stye="display:none;"

Responder
tu post blog  

muy buen efecto, en su momento lo necesitaba :X

Responder
Drawer 4 Everyone  

Oye, mira esto es tan maravilla que casi me hacho a llorar, te cuento:
Estaba yo triste y un pelín depre por el ver que sí usaba las librerias de scriptculous y prototype mi menú de jquery se fastidiaba, por lo que tenía pensado ya abandonar ese maravilloso efecto que ofrecían, pero veo que si utilizo esto no se me jode, y va todo bien, lo único, ¿hay alguna manera de que con un boton se aparezcan las cosas, y despues volviendolo a pulsar el mismo, se vuelvan a esconder?
¿O obligatoriamente hay que uno para que salga y otro para que se esconda?

Responder
Drawer 4 Everyone  

Mas concretamennte hablo del de fade

Responder
JMiur  

Los efectos a los que te refieres, creo que son Toggle y Slide Toggle en ambos, se permuta el estado de visible a oculto con un solo enlace.

Responder
Drawer 4 Everyone  

Que sí, pero lo que te refiero es haber cómo puedo hacer un fade toogle.
¿sabrías hacerlo, maestro?

Responder
JMiur  

Como no sé mucho de jQuery, déjame ver si encuentro algo sencillo para hacer ese tipo de efectos; seguramente, debe haber algo por ahí :)

Responder
Bilosony2™  

Hola! Jmiur e estado buscando por todas partes pero no encuentro nada, te cuento busco alguna manera para que todos los enlaces tegan efecto hover suavisado, como desvanecido. Espero que tengas la respuesta para eso.

Saludos!!

Responder
JMiur  

Sobre jQuery no tengo idea :-$

Responder
m3nd3z  

Hola JMiur....de nuevo yo molestando la vida :P

Lo que quiero saber es lo siguiente:
Tengo cuatro Div's: cada uno se identifica con Div1, Div2, Div3 y Div4.

Lo que quiero hacer, es que cuando se haga clic en el Div1, el Div3 se muestre, y se esconda el Div4, y que al clicar el Div2 suceda lo contrario.

Podrías darme una luz sobre cómo hacer esto en JQuery?

Responder
JMiur  

No sé si sería algo así:

$('#Div1').click(function() {
$('#Div3').hide();
$('#Div4').show();
});

$('#Div2').click(function() {
$('#Div3').show();
$('#Div4').hide();
});

Responder
Fernando Pascual  

Hola la verdad no he podido ponerla en mi blog! :( pero ojala que en una oportunidad puedas poner toda la sintaxis completa para que yo pueda ver como funciona!.. pero gracias he aprendido en otros tutos de tu blog! :)

Responder
JMiur  

Pués esos son los códigos y los ejemplos. No hay mucho más para mostrar; sólo se trata de efectos simples.

Responder
Indeziisoow  

No me funciona. ¿Hay que hacer algo adicional? Agredecería su ayuda JMiur.

P.S.: Intenté hacer el efecto slideToggle()

Responder
JMiur  

Tendria que saber qué es lo que has hecho o dónde esta el ejemplo.

Responder
L  

hola Jmiur ..
es posible hacer que inicialmente este oculto el contenido?
ayuda porfa y gracias de antemano

Responder
JMiur  

Sí, colocándole display:none; al inicio.

Responder
NickJP!^xD  

Jmiur por que a mi no me funciona no se que este haciendo mal o es que tengo que agregar class a los elementos <div display: block; display: none; si es asi explicame Gracias
un Saludo!
http://wpdjstoni.vacau.com/prueva.html

Responder
deathdan93  

La verdad es que jQuery facilita el trabajo :P

Yo he estado probando con otras formas de mostrar los objetos ocultos: Un ejemplo

Con CSS se solucionan muchas cosas :D jaja
El único problema es cuando intento implementarlo en blogger (no lo entiendo) no hay manera de que funcione. ¿Qué estaré haciendo mal?

Responder
JMiur  

No hay ningún porblema en hacer eso mismo en Blogger. Debería ver tu ejempl opara decirte dónde está la falla.

Recuerda que las plantillas de Blogegr son dicumentos de tipo estricto y por lo tanto, los scripts deben utilziar CDATA para evitar que se modifique el código.

Responder
deathdan93  

Ese mismo ejemplo que te dejé en el comentario anterior lo probé con CDATA en el Script y no dio resultado en la plantilla, pero si en las entradas... :S es algo extraño. No se porque pasa algo semejante. ¿Seré yo o será Blogger? :D

Responder
JMiur  

Si se ve en las entradas pero no en el home, es que estás cometiendo algún error o condionando los scripts o algo similar. Habría que mirar el ejemplo concreto.

Responder
deathdan93  

He descubierto el problema que tenía en blogger |O al fin pero mi felicidad se desvaneció cuando no podía poner más de uno porque la ID es única...

<script type="text/javascript">
$(document).ready(function() {
$('#botonslide').click(function() {
$("#slide").animate({
top: parseInt($("#slide").css("top"))== 0 ?"-="+$("#slide").outerHeight() : 0
},1000);
});
});
</script>

Mi intención es ponerla en un bucle de blogger pero solo interpreta la primera y las otras no reaccionan (otra vez la ID). He visto que podría solucionar con "this" pero no estoy muy seguro de como ponerlo, lo he intentado varias veces, pero nada... ¿Se podría hacer algo para que esto mismo funcionara en bucles? Al final aprenderé a base de golpes :O

Responder
JMiur  

Podrías probar usar clases en lugar de IDs.

Responder
deathdan93  

:D Eso mismo pensé pero entonces... el botón abría todos los Div jaja

no hay manera, no se hacerlo. :)

Responder
JMiur  

Lógico. Debes usar clases y además, identificarlos. También puedes colcoar algún ID dinámico; no sé, depende de lo que quieras hacer, del uso que quieras darle, de donde esté colocado, etc.

Responder
deathdan93  

¿ID dinámico? ¿se trata de poner variantes en JavaScript?

Responder
JMiur  

Insisto, como no se el contexto, sólo hablo en términso generales. Un ID variable podría usar un dato cualquiera, un contador, lo que haya disponible: Todo es muy abstracto como para responder.

Responder
deathdan93  

Entiendo... Mi única intención era hacer las entradas resumidas que tengo en mi blog expandibles, ocultando y mostrando de esta forma, pero creo que no voy a poder hacerlo.

Con las entradas:

<data:post.body/>

En principio este mismo Script funcionaba:

<script type='text/javascript'>
//OCULTAR/MOSTRAR (jQuery)
jQuery.noConflict();
jQuery(document).ready(function(){jQuery(".oculto").hide();jQuery(".visible").click(function(){jQuery(this).next(".oculto").fadeToggle(900)})});
</script>

haciendo esto:

<div class="visible">una imagen o texto visible</div><div class="oculto"><data:post.body/></div>

Se abrían y ocultaban

Este efecto al igual que el Slide funcionan, pero es que el que te enseñe como ejemplo me gusta más :D y no hay manera de que funcione :(

Bueno, ese era mi problema concreto. Intentaré ver la manera de solucionarlo, creo que al fin lo lograré por pesado. Siento tantas preguntas :P Gracias.

Responder
deathdan93  

¡Al final me ha salido! jaja resulta que quería algo muy simple (toggle con efecto slide) :D lo conseguí hacer sin problemas en jQuery UI con clases :) ¡Ya esta! :( el único problema es que ahora dependo de esa librería =/

Responder
Jesus Robles Quiroz  

alguien podria decirme como hacer que el contenido del div este oculto y al darle click aparesca con el efecto toggle. o mas bien como inicializarlo en 0(oculto) no en 1(visible)

JMiur  

Agregándole la propiedad display:none al estilo del div.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR