Duda movimiento infinito jquery

Archivado
Estoy intentando hacer que un <div> suba y baje sin parar una vez pulse un botón, pero no encuentro la forma. Quiero que baje por ejemplo 500px hacia abajo y luego los vuelva a subir para después volver a bajar y así hasta el infinito y más allá. He probado con slideDown y slideUp pero solo se mueve un poquito, además no consigo hacerlo que no pare.

¿Alguien me echa una mano?
function baja(){
    $('#elDiv').animate({marginTop: '500px'}, {complete: sube});
}

function sube(){
    $('#elDiv').animate({marginTop: '0px'}, {complete: baja});
}

$('#boton').on('click', baja);

Bueno no lo he probado, pero en teroía debería de funcionar. El complete llama a un callback (función), en el momento de terminar la aniamción. Regularmente se usan funciones anónimas en los callbacks, pero en este caso como las vamos a llamar varias veces usamos funciones con nombre.

Si el div tiene posición relativa o absoluta, puedes usar top en lugar de marginTop
Gracias, funciona parcialmente. Baja pero no vuelve a subir, ya arreglaré yo esto. Al probar con animate use margin-top en vez de maginTop.
Alecs7k escribió:Gracias, funciona parcialmente. Baja pero no vuelve a subir, ya arreglaré yo esto. Al probar con animate use margin-top en vez de maginTop.


Es extraño lo acabo de probar y me funcionó, te dejo en spoiler el código completo con el HTML

<html>
<head>
<title></title>
</head>
<body>

<input id="boton" type="submit" value="animate" />
<div id="elDiv" style="background:blue; height:100px;"></div>

</body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function baja(){
$('#elDiv').animate({marginTop: '500px'}, {complete: sube});
}

function sube(){
$('#elDiv').animate({marginTop: '0px'}, {complete: baja});
}

$('#boton').on('click', baja);
</script>
</html>
Alecs7k escribió:Gracias, funciona parcialmente. Baja pero no vuelve a subir, ya arreglaré yo esto. Al probar con animate use margin-top en vez de maginTop.


Se supone que es un "alias" marginTop, debería funcionarte, ¿que versión de jQuery usas?
function baja(){
                $('#todo').animate({marginTop: '500px'}, 2000);
                sube();
           };


         function sube(){
            $('#todo').animate({marginTop: '0px'}, 2000);
            baja();
           };


Así es como lo he hecho. Funcionar, funciona, pero da error. Supongo que porque es algo infinito.
5 respuestas
Archivado
Volver a General