Tema: hacer aparecer un div centrado con jquery.
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 06/05/2013, 08:52
PabloManuel
 
Fecha de Ingreso: diciembre-2010
Mensajes: 236
Antigüedad: 14 años
Puntos: 6
Respuesta: hacer aparecer un div centrado con jquery.
¡Lo conseguí! dios mio.... que trabajiiito me está costando el Jquery, pero que chulo queda todo:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>ejemplo desaparecer/aparecer</title>
  6.     <style type="text/css">
  7.         html, body {
  8.             height:100%;
  9.             width:100%;
  10.             margin:0px;
  11.             padding:0px;
  12.         }
  13.         #mensaje {
  14.             width:560px;
  15.             position: fixed;
  16.             top: 50%;
  17.             left: 50%;  
  18.             margin: -250px 0 0 -280px;   
  19.             visibility: hidden ;     
  20.         }
  21.     </style>
  22.     <script src="http://gsgd.co.uk/sandbox/jquery/jquery-1.2.1.js" type="text/javascript"></script>
  23.     <script type="text/javascript">
  24.       
  25.         function on_off(objeto, caida){
  26.             if ($(objeto).is(":visible"))
  27.             {
  28.                 $(objeto).animate({
  29.                     opacity: 0.0,
  30.                     marginTop: caida,
  31.                     }, 500 ).hide("slow");
  32.             }
  33.             else
  34.             {
  35.                 $(objeto)
  36.                 .animate({
  37.                     opacity: '0.0',
  38.                     marginTop: "-"+caida,
  39.                     }, 10 ).show()
  40.                 .animate({
  41.                     opacity: '1.0',
  42.                     marginTop: "0",
  43.                     }, 1000 )
  44.                 .css(*"visibility", "visible" );
  45.             }
  46.         }
  47.     </script>
  48. </head>
  49. <body>
  50.         <a href="#" onclick="javascript:on_off('#mensaje', '10%'); return false;">Aparecer</a><br/>
  51.         
  52.     <div id="mensaje">
  53.             <img alt="123" src="http://pruebas.com/images/sinfoto.jpg" />
  54.     </div>
  55. </body>
  56. </html>