Iniciar efecto jQuery al cargar pagina

Citar

Escrito el 08 Feb 2008 04:12 pm

Hola!

Estoy intentando darle un efecto de movimiento a un div con jQuery y necesito que se inicie al cargarse la pagina.

He probado varias cosas:

Código :

$(document).ready(function (){


   $("#menu_prin").animate({top:150}, "slow");

}

Código :

$(document).ready(function (){

$("body").load(function (){
   $("#menu_prin").animate({top:150}, "slow");
}
}

Código :

$(document).ready(function (){

$(window).load(function (){
   $("#menu_prin").animate({top:150}, "slow");
}
}

Y ninguna de ellas me ha dado resultado. ¿Estoy haciendo algo mal? ¿Es de otra forma distinta a como yo lo he planteado?

Espero sus respuestas! y gracias de antemano!!

Por sebasstyle

35 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 08 Feb 2008 09:31 pm

La primera forma debería funcionar:

Código :

$(document).ready(function (){


   $("#menu_prin").animate({top:150}, "slow");

});

Por que no colocas el resto del codigo, para ver si algo está causando incompatibilidad?

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino

Envíale un mensaje privado

The dark places where wolves access internet with 46,6 kbps

Citar

Escrito el 08 Feb 2008 09:38 pm

El código es el siguiente:

HTML

Código :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="efectos_jquery_index.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="style_index.css">
</head>

<body>

<div id="menu_prin">
   <li id="juego" class="eleccion_secciones" onclick="cargarJuego()"></li>
   <li id="molinos" class="eleccion_secciones" onclick="cargarPatrimonio()"></li>
   <li id="natura" class="eleccion_secciones" onclick="cargarNatura()"></li>

</div>

CSS

Código :

body{

   background-color:#CCFFCC;
   padding:0;
   margin:0;

}

li{

   width:200px;

   height:200px;

   margin:25px 25px;

   list-style:none;

   padding:0; 

   float:left;

}

li:hover{

   background-color:#BBFFBB;

}
#menu_prin{
   width:750px;

   height:250px;

   margin:0 auto;

   background-color:#DDFFDD;

   text-align:center;

   padding:0 !important;

   padding:0 30px;
}

y de jQuery lo que dije antes...
Sigo dándole vueltas, pero nada, no encuentro el posible error.

Gracias por la respuesta L.L.!!

un saludo!

Por sebasstyle

35 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 08 Feb 2008 10:46 pm

position:absolute; top:0px;

Eso te faltaba.
Recuerda, que las funciones "guais" de jQuerry, mueven cosas de un sitio, a otro.
Por esa razón, has de indicar la posición INICIAL.

La cosa quedaría así:

Así funciona perfectamente.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 12 Feb 2008 09:22 pm

Thank you rizome! me funciona perfectamente, pero con position:relative en vez de absolute, porque el div está centrado en el body.

Gracias de nuevo! ciau!

Por sebasstyle

35 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 12 Feb 2008 11:46 pm

sebasstyle escribió:

[...] con position:relative en vez de absolute, porque el div está centrado en el body [...]

El position "absolute", funciona como "relative" si el elemento padre es "relative".

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 15 Feb 2008 12:07 pm

El position:absolute también centra respecto al elemento "padre", cuando este es relative.
Ejemplo:

Código :

<head>
<style>
.contenedor {position:relative; left:4em; top:2em; width:500px; height:7em; border:red 1px solid;}
.contenido  {position:absolute; left:10px; top:2px; width:400px; height:2.5em; border:blue 1px dashed;}
.flotante   {position:absolute; left:1em; top:10em; border:green 1px dotted;}
</style>
</head>
<body>
<div class="contenedor">
   Este div, se posiciona con "relative", a "4em,2em" del body.
   <div class="contenido">
      Este div no está en el "10,2" del body, sino del div contenedor.
   </div>
</div>
<div class="flotante">
   Este "absolute", sí que está posicionado respecto al body.
</div>
</body>

Si no lo entiendes del todo... aquí tienes el ejemplo montado.
(lo habría subido a algún alojamiento gratuito de HTML (como imageshack), pero no conozco ninguno para HTML)

Código :

<html>
<head>
<style>
.contenedor {position:relative; left:4em; top:1em; width:500px; height:7em; border:red 1px solid;}
.contenido  {position:absolute; left:10px; top:2px; width:400px; height:2.5em; border:blue 1px dashed;}
.flotante   {position:absolute; left:1em; top:10em; border:green 1px dotted;}
</style>
</head>
<body>
<div class="contenedor"><br /><br /><br />class="contenedor"<br />Este div, se posiciona con "relative", a "4em,2em" del body.
      <div class="contenido">class="contenido"<br />Este div no está en el "10,2" del body, sino del div contenedor.</div>
</div>
<div class="flotante">
class="flotante"<br />Este "absolute", sí que está posicionado respecto al body.<br /><br /></div>
<br /><br /><br /><br /><br /><br /><br />
HTML:
<pre>
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.contenedor {position:relative; left:4em; top:2em; width:500px; height:7em; border:red 1px solid;}
.contenido  {position:absolute; left:10px; top:2px; width:400px; height:2.5em; border:blue 1px dashed;}
.flotante   {position:absolute; left:1em; top:10em; border:green 1px dotted;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="contenedor"&gt;
   Este div, se posiciona con "relative", a "4em,2em" del body.
   &lt;div class="contenido"&gt;
      Este div no está en el "10,2" del body, sino del div contenedor.
   &lt;/div&gt;
&lt;/div&gt;
&lt;div class="flotante"&gt;
   Este "absolute", sí que está posicionado respecto al body.
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</body>
</html>

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 20 Feb 2008 10:30 pm

gracias rizome por la didáctica aclaración!!!

me encanta cristalab porque la forma gente como tú!!

muchas gracias!!!

un saludo!

Por sebasstyle

35 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Citar

Escrito el 20 Feb 2008 11:18 pm

sebasstyle escribió:

[...]
me encanta cristalab porque la forma gente como tú!!
[...]

Me voy a ruborizar... :oops:

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

Envíale un mensaje privado

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

Citar

Escrito el 17 Sep 2009 10:27 am

Hola!
yo he tenido una duda igual, he kerido ke kuando se kargue la pagina, el div lo que haga es ke aparezca poco a poco... usando el fadeIn, pero no se komo hacer ke sea al cargar la pagina...

En realidad lo ke yo tengo es un flash kon una animacion me akaba desapareciendo poco a poco, y lo que kiero es ke el contenido siguiente aparezca igual, poco a poco (de invisible a visible). He intentado usar el faceIn pero no lo konsigo. con el mismo ejemplo que sebasstyle lo he estado intentando y nada... podeis ayudarme en eso?

muchas gracias

Por kabrator

3 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 17 Sep 2010 08:51 pm

$(document).ready(function(){
$("#menu a").each(function(){
var href = $(this).attr("href");
$(this).click(function(){
$("#principalTop").hide().load(href, function(){
$("#"+"cargando...").remove();$(this).fadeIn("slow")
});
return false;

});
});
});

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Iniciar efecto jQuery al cargar pagina

Escribe una respuesta rapida