2009-10-02 3 views
8

У меня есть две дивы и две кнопки:Как прокрутить div непрерывно на событии mousedown?

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

Как постоянно прокручивать «» #items до выпусками пользователя кнопку? Я попытался использовать событие jQuery mousedown и функцию анимации, но не смог заставить его работать.

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

Приведенный выше код перемещает div только один раз. Я хочу добиться непрерывной анимации до тех пор, пока кнопка не будет отпущена. Спасибо за вашу помощь!

ответ

14

Пожалуйста, попробуйте следующее:

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

Это работает только вы получите ошибку JS, что obj.animate не является функцией на MouseUp. Более чистый способ сделать это и избежать ошибки js: if (! Прокрутка) { obj.stop(); } еще { obj.animate ({ "сверху": пары}, "быстро", функция() { , если (прокрутка) { startScrolling (OBJ, пары); } }); } – Mark

+1

Я сделал [скрипку] (https://jsfiddle.net/blindside/18p65htx/), которая включает ответ @ fedosov с дополнительным входом Марка, а также мои собственные модификации: D –

+0

@JesseDupuy как прокрутка одной кнопки а другой вниз? Похоже, вы только научили их прокручивать вниз! –