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 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
HTML:
<p>texto, texto, texto<span class="spoiler">Contenido oculto........</span></p>
Loading ...
Alberto
21-04-2008
Permalink
exelente articulo.
Saludos
Morpheo
21-04-2008
Permalink
Muy util ahora que empieza LOST jajajaja
nitos
21-04-2008
Permalink
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