2009-10-02 9 views
8

Ich habe zwei Divs und zwei Tasten:Wie scrollen Sie div kontinuierlich bei mousedown Ereignis?

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

Wie scrollt man kontinuierlich ‚#items‘ bis Benutzer den Knopf? Ich habe versucht, mit jquery mousedown Ereignis und Animate-Funktion, konnte es aber nicht funktionieren.

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

Der obige Code bewegt das div nur einmal. Ich möchte eine kontinuierliche Animation erreichen, bis die Schaltfläche losgelassen wird. Danke für Ihre Hilfe!

Antwort

14

Bitte, versuchen Sie dies:

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

Dies funktioniert, außer Sie eine js Fehler erhalten wird, dass obj.animate keine Funktion auf mouseup ist. Ein sauberer Weg, dies zu tun und den js-Fehler zu vermeiden, ist: if (! Scrolling) { obj.stop(); } else { obj.animate ({ "top": param}, "schnell", function() { if (Scrollen) { startScrolling (obj, param); } }); } – Mark

+1

Ich machte eine [Geige] (https://jsfiddle.net/blindside/18p65htx/), die die Antwort von @ fedosov mit Marks zusätzlichem Input, zusammen mit einigen eigenen Modifikationen, enthält: D –

+0

@JesseDupuy Wie scrollt man mit einem Knopf? hoch und der andere runter? Es sieht so aus, als hättest du sie nur gelehrt, um nach unten zu scrollen! –

Verwandte Themen