2009-10-02 12 views
8

Mam dwie div i dwa przyciski:Jak przewijać div w sposób ciągły na mousedown wydarzeniu?

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

Jak ciągle przewijać „#items” aż uwolnień użytkownika przycisk? Próbowałem używać zdarzenia jquery mousedown i animacji, ale nie mogłem go uruchomić.

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

Powyższy kod przenosi div tylko raz. Chcę uzyskać ciągłą animację do momentu zwolnienia przycisku. Dzięki za pomoc!

Odpowiedz

14

Proszę, spróbuj tego:

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

Działa to z wyjątkiem dostaniesz błąd js że obj.animate nie jest funkcją na mouseUp. Czyściejszy sposób na zrobienie tego i uniknięcie błędu js to: jeśli (! Przewijanie) { obj.stop(); } else { obj.animate ({ "góra": parametr} "szybko" funkcja() { if (przesuwać) { startScrolling (obj, param) } }); } – Mark

+1

Zrobiłem [skrzypce] (https://jsfiddle.net/blindside/18p65htx/), które zawiera odpowiedź @ fedosova z dodatkowym wpisem Marka, wraz z pewnymi modyfikacjami: D –

+0

@JesseDupuy jak przewija się jeden przycisk do góry, a drugi na dół? Wygląda na to, że nauczyłeś ich tylko przewijania w dół! –

Powiązane problemy