Spoiler Revealer – Ocultar contenido adicional con jquery
Fade-in Spoiler Revealer, es una agradable técnica que veo en css-tricks, en la cual usando jQuery podremos ocultar o mostrar toda la parte de un texto y sustituirla por un " revelar contenido adicional" o “seguir leyendo”. Inclusive al Mostar el contenido oculto, se produce un efecto desvanecimiento que lo hace ver muy bonito. Queda en ustedes, pensar en que proyecto en el cual trabajan podrá ser realmente útil.
Ver Demo - Descarga Ejemplo - Mas Info css-tricks
Instalacion
Añadimos a nuestro encabezado
JavaScript:
-
<script type="text/javascript" src="js/jquery.js"></script>
-
-
<script type="text/javascript">
-
$(document).ready(function() {
-
-
$("span.spoiler").hide();
-
-
$('<a class="reveal">Reveal Spoiler>></a> ').insertBefore('.spoiler');
-
-
$("a.reveal").click(function(){
-
$(this).parents("p").children("span.spoiler").fadeIn(2500);
-
$(this).parents("p").children("a.reveal").fadeOut(600);
-
});
-
-
});
-
</script>
Uso
Alberto said,
Wrote on April 21, 2008 @ 15:59
exelente articulo.
Saludos
Morpheo said,
Wrote on April 22, 2008 @ 14:13
Muy util ahora que empieza LOST jajajaja
nitos said,
Wrote on April 28, 2008 @ 20:01
emmm eso lo vi en css-tricks antes que aqui y lo probe.. y me funciono tdo muy tuanis, pero cuando lo trate de hacer en la plataforma de blogger se me hizo una mierda, no sacaba nada.. no se podia hacer nada..
tienes alguna sugerencia?? gracias
jose
admin de nitosblog. jejeje