daG*_*GUY 5 javascript jquery scroll javascript-events
我的页面有一个可滚动的区域,其中包含许多元素.每个元素在悬停时触发一个函数.
我的问题是,如果用户使用鼠标滚轮向上或向下滚动,则该功能将触发光标在区域滚动下方时所经过的每个元素.
有没有办法只有在用户没有主动滚动时才能在悬停时启用功能触发器?
jQuery的内置.scroll()似乎不是我需要的,因为滚动事件仅在滚动开始时触发.我需要知道滚动是否"正在进行中"可以这么说.
更新:这是我目前的代码:
$container.find('div.item').each(function(i, e){
$(e).hover(
function(){
$(this).toggleClass('expanded');
// other functions here
},
function(){
$(this).toggleClass('expanded');
}
);
});
Run Code Online (Sandbox Code Playgroud)
所以我想要做的是.hover()如果用户当前正在滚动页面,则禁用所有内容.
我会使用setTimeout一个公平的时间 onmouseenter和 then clearTimeouton mouseleave,这会在悬停上产生一个小的延迟,因此只有当用户将鼠标悬停在元素上并持续设定的时间时才会触发悬停。
这有望最大限度地减少您的滚动问题。可能有比这更好的解决方案,但这是我首先想到的。
编辑
很快写了这个例子,应该可以正常工作:
$(function() {
"use strict";
var $container = $("#container"),
timeout, self;
$container.find("div").each(function() {
$(this).hover(
function() {
self = this;
timeout = setTimeout(function() {
$(self).css({
width : 500,
height: 500
});
}, 500);
},
function() {
clearTimeout(timeout);
$(this).css({
width : 300,
height: 300
});
}
);
});
});
Run Code Online (Sandbox Code Playgroud)
如需演示,请访问此小提琴:http://jsfiddle.net/sQVe/tVRwm/1/
延迟多少就看你自己了,我用的是500ms。
笔记
不需要.each(),您可以立即调用集合.hover()上的。div我加入是.each()因为我不知道您是否想做的不仅仅是绑定悬停事件。
| 归档时间: |
|
| 查看次数: |
1374 次 |
| 最近记录: |