2009-10-02 15 views
8

tengo dos divs y dos botones:Cómo desplazar div continuamente en el evento mousedown?

<div id="container"> 
    <div id="items"></div> 
</div> 
<div id="up"></div> 
<div id="down"></div> 

Cómo desplazarse continuamente '' hasta #items usuario libera el botón? Intenté usar el evento jquery mousedown y animar la función pero no pude hacerlo funcionar.

$("#up").mousedown(function(){ 
$("#items").animate({"top": "+=10px"}, "fast"); 
}) 

El código anterior mueve el div una sola vez. Quiero lograr una animación continua hasta que se suelte el botón. ¡Gracias por tu ayuda!

Respuesta

14

Por favor, intente esto:

var scrolling = false; 

jQuery(function($){ 
    $("#up").mousedown(function(){ 
     scrolling = true; 
     startScrolling($("#items"), "-=10px"); 
    }).mouseup(function(){ 
     scrolling = false; 
    }); 
}); 

function startScrolling(obj, param) 
{ 
    obj.animate({"top": param}, "fast", function(){ 
     if (scrolling) 
     { 
      startScrolling(obj, param); 
     } 
    }); 
} 
+6

Esto funciona, excepto que se obtiene un error de js que obj.animate no es una función de mouseup. Una forma más clara de hacerlo y evitar el error js es: if (! Scrolling) { obj.stop(); } else { obj.animate ({ "top": param}, "rápida", function() {si (desplazamiento) { startScrolling (obj, param); } }); } – Mark

+1

Hice un [violín] (https://jsfiddle.net/blindside/18p65htx/) que incorpora la respuesta de @ fedosov con la entrada adicional de Mark, junto con algunas modificaciones propias: D –

+0

@JesseDupuy cómo se desplaza un botón arriba y el otro abajo? ¡Parece que solo les has enseñado a desplazarse hacia abajo! –

Cuestiones relacionadas