Jquery 如何在mousedown事件中连续滚动div？

我有两个div和两个按钮：

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

上面的代码只移动div一次。我想实现连续动画，直到按钮被释放。谢谢你的帮助

请尝试以下操作：

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);
        }
    });
}

---

我改进了jesse dupuy的小提琴。我已经在动画中添加了“线性”缓和，因此滚动是平滑的，并将.on（'mouseup'）事件从按钮移动到文档中，因此用户在何处释放鼠标按钮并不重要

$（函数（）{
//使用页面内容中的UI箭头控制滚动
var滚动=假；
$（'.scroll arrows'）.on（'mousedown'，'div'，函数（evt）{
滚动=真；
开始滚动（$（'.scroll box'），100，evt.target.id）；
});
$（文档）.mouseup（函数（）{
滚动=假；
});
功能启动滚动（obj、spd、btn）{
变量行程=（btn.indexOf（'up'）>-1）？'-='+spd+'px'：'+='+spd+'px'；
如果（！滚动）{
obj.stop（）；
}否则{
//在按下鼠标时递归调用startScrolling
对象动画({
“滚动顶”：旅行
}，“快速”，“线性”，函数（）{
开始滚动（obj、spd、btn）；
});
}
}
});
。滚动框{
最大高度：300px；
溢出y：滚动；
边框：2倍实心#000；
边缘底部：20px；
}
.滚动框。溢出{
高度：1000px；
背景：#d0e4f7；
背景：url（数据：image/svg+xml；
基于64，PD94BWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 ZXQ9IJEWMCUIIHN0B3ATY29SB3I9IIM4N2JZWIIHN0B3BHY2L0ET0IMPGOGIDWBGLUZWFYR3JHZGLBNQ+CIAGPHJLY3QGED0IMCIG0IMCIGd2LKDGG9IJIIGHLAWDODD0IMSIGZMLSBD0IDXJSKCNNCMFKLXVZ2CTZ2VUZZXDGVKKSIGLZ4KPC9ZDMC+；
背景：-莫兹线性梯度（顶部，#d0e4f7 0%，#73b1e7 24%，#0a77d5 50%，#539fe1 79%，#87bcea 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#d0e4f7）、颜色停止（24%、#73b1e7）、颜色停止（50%、#0a77d5）、颜色停止（79%、#539fe1）、颜色停止（100%、#87bcea））；
背景：-webkit线性梯度（顶部，#d0e4f7 0%，#73b1e7 24%，#0a77d5 50%，#539fe1 79%，#87bcea 100%）；
背景：-o-线性梯度（顶部，#d0e4f7 0%，#73b1e7 24%，#0a77d5 50%，#539fe1 79%，#87bcea 100%）；
背景：-ms线性梯度（顶部，#d0e4f7 0%，#73b1e7 24%，#0a77d5 50%，#539fe1 79%，#87bcea 100%）；
背景：线性梯度（至底部，#d0e4f7 0%，#73b1e7 24%，#0a77d5 50%，#539fe1 79%，#87bcea 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#d0e4f7'，endColorstr='#87bcea'，GradientType=0）；
}
.滚动箭头{
文本对齐：居中；
}
.滚动箭头分区{
显示：内联块；
宽度：40%；
填充：20px；
光标：指针；
颜色：#fff；
背景：#00f；
}

这里有很多内容。。。
向上滚动
向下滚动
除非您将得到一个js错误，即obj.animate不是mouseup上的函数，否则此操作有效。这样做并避免js错误的一种更简洁的方法是：if（！scrolling）{obj.stop（）；}else{obj.animate（{“top”：param}，“fast”，function（）{if（scrolling）{startScrolling（obj，param）；}}}我做了一个测试，将@fedosov的答案与Mark的额外输入结合起来，以及我自己的一些修改：D@JesseDupuy一个按钮如何上下滚动？看起来你只是教他们向下滚动！这种实现总是导致Firefox中出现“错误：太多递归”。
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);
        }
    });
}