Question

在jquery中 因为animate()是有延时的 所以有时候会超出范围 怎样设定超出后阻止事件继续执行？

是一个页面上可以用鼠标滚轮控制的滚动菜单

菜单是ul,li 用绝对定位 id 是 "#menu_ul"，
菜单外部div大小固定，超出部分隐藏 id 是 "#menu_div"
我使用了mousewheel插件 监听了 "#menu_div" 上的鼠标滚轮事件，控制 "#menu_ul" top属性
简单代码也就是
$("#menu_div").mousewheel(function( ){
$("#menu_ul").animate({"top": "+=35px"},100);
})

但是我想限制一下top不能大于350px
于是我加了条件

$("#menu_div").mousewheel(function( ){
var topvalue=$("#menu_ul").position().top;

if(topvalue<350)

$("#menu_ul").animate({"top": "+=35px"},100);
})

但是因为animate是在100毫秒之后 top 值才能加到35px，在100毫秒内值是不固定的
所以如果频繁滚动滚轮的话值可能会超过350
请问怎么解决这种问题

Answer 1

//这个语句改下
$("#menu_ul").animate({"top": "+=35px"},100);
//先判断增加35后的值，如果超过350，就等于350，就不怕了
divTop=parseInt($("#menu_ul").css('top').replace('px', ''))+35;
if(divTop>350)divTop=350;
$("#menu_ul").stop().animate({"top": divTop},100);

追问

这个方法是很好 和$().stop() 是一样的效果 就是执行滚动脚本快的话反而更慢
有没有办法是监听 #menu_ul 的 top变化而不是在 滚轮滑动时做判断？

追答

就是执行滚动脚本快的话反而更慢

听不懂这句

监听top的变化，肯定是没有这个方法执行效率高的

//用interval每个10毫秒监听一次，这个时间需要你自己调试下
scrollTimer=setInterval("banTop()", 10)
//在适当的时候，去除这个interval
clearInterval(scrollTimer);

function banTop()
{
if(parseInt($('#menu_ul:animated').css('top').replace('px', ''))>=350)
$("#menu_ul").stop().css('top', 350);
}

追问

也就是说 当我滚动一次滚轮 top+35 而我快速滚动再次 top就应该加上70 而 因为有100毫秒的延时 top加的值是在 0到35之间的 也就是快速滚动10次 值还是只加35 因为

divTop=parseInt($("#menu_ul").css('top').replace('px', ''))+35;
这个值是实时的值而不是目标值
这时候是不是必须要在外部加个变量来保存我的目标值？

追答

//直接记录在该div的属性上就可以了，
divTop=parseInt($("#menu_ul").attr('data-top'))+35);
if(divTop>350)divTop=350;
$("#menu_ul").attr('data-top', divTop);
$("#menu_ul").stop().animate({"top": divTop},100);

滚动的速度越来越慢的问题，你应该根据滚动的距离判断

例如你现在top是0，你滚5次，到175，那么你的时间可以改为175毫秒

如果是315滚动350，那么你可以滚35毫秒，具体时间自己试哈~·

Answer 2

在执行滚动效果之前执行一下：$("#menu_ul").stop();用于停止当前对象的所有动态效果

追问

我试了下 体验度差了一些 因为每次滚动都停止特效 滚轮滚动速度越快移动就越慢