ayuda con DIV

funktasmas · #1 (**permalink**) 17/03/2011, 13:02

hola a todos... llevo como tiempo programando y no se como hacerlo... lo busque pero no lo encontre espero que me puedan ayudar

tengo un div que muestra un mensaje despues que se procesa un formulario pero necesito que se desvanesca de a poco... creo y me comentaron que se puede hacer con jquery pero no se con que funcion o como se hace... si me pudiera ayudar se lo agradeceria demasiado de antemano muchas gracias :)

Naahuel · #2 (**permalink**) 17/03/2011, 14:47

Ejemplirijillo:

Código HTML:

Ver original<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 
<script>
$(document).ready(function(){
    $('#desvanecer').click(function(){
        $("#soy-un-div-que-se-desvanece").fadeOut();
    });
});
</script>
 
<div id="soy-un-div-que-se-desvanece">
    <p>Hola que tal. Si precionas el link de abajo me desvanezco.</p>
    <a href="#" id="desvanecer">Desvanecer</a>
</div>

La función que necesitás es ".fadeOut()". Podés encontrar mucha información en la documentación del sitio de jQuery.
http://api.jquery.com/fadeOut/

hmvr414 · #3 (**permalink**) 17/03/2011, 15:54

si el formulario direcciona a otra pagina con el mensaje, se puede usar un script al iniciar usando delay para que el mensaje este visible un tiempo y fadeOut para ocultarlo.

Código HTML:

Ver original<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#mensaje")
            .delay(800)
            .fadeOut("fast");
    });
</script>
</head>
<body>
...
<div id="mensaje">Un mensaje</div>
..
</body>

fedefrankk · #4 (**permalink**) 17/03/2011, 16:33

Hola te dejo un ejemplo.

El primer div, contiene una imagen, en mi caso un boton. El segundo div contiene otra imagen que seria una portada.

Lo que quiero hacer es cuando preciono el primer div osea el boton esta imagen aparezca de apoco o desaparezca como vos quieras.

Los dos div que las imagenes estan en CSS. fijate el segundo div que la imagen esta oculta.

Código HTML:

Ver original<div onclick="BYSER('B1')" class="BYIMAG5" id="IMG5"></div>
<div class="SERV_1" id="SERV_1" style="display:none"></div>

hago una funcion , fijate que la funcion se llama igual que "onclick del div"

Código Javascript:

Ver original<script language="javascript" type="text/javascript">
function BYSER(B1) {
$('#SERV_1').fadeIn(900);/* Muestro Imagen del Segundo DIV, 900, creo que es en milisegundos, anda probando*/ 
$('#SERV_2').fadeOut(800);/* Se esconde el mismo div. */ 
}

Espero que te sirva saludos
Fede
PD: al principio de tu HTML tenes que poner la siguiente linea para que se ejecute jQuery.

Código Javascript:

Ver original<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"> </script>

funktasmas · #5 (**permalink**) 21/03/2011, 06:13

muchas gracias a todos los comentarios de ayuda.... me ha servido muchos... gracias :)