6

我的页面有一个可滚动区域，其中包含许多元素。每个元素在悬停时都会触发一个功能。

我的问题是，如果用户使用鼠标滚轮向上或向下滚动，当区域在下方滚动时，该函数会针对光标经过的每个元素触发。

只有当用户没有主动滚动时，我才能在悬停时触发功能？

jQuery 的内置.scroll()似乎不是我所需要的，因为只有在滚动开始时才会触发滚动事件。可以这么说，我需要知道卷轴是否“正在进行”。

更新：这是我当前的代码：

$container.find('div.item').each(function(i, e){
     $(e).hover(
          function(){
               $(this).toggleClass('expanded');
               // other functions here
          },
          function(){
               $(this).toggleClass('expanded');
          }
     );
});

.hover()因此，如果用户当前正在滚动页面，我想要做的是禁用所有内容。

4

1 回答 1

3

我会使用setTimeout公平的时间 onmouseenter然后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
                });
            }
        );
    });
});

对于演示去这个小提琴：http: //jsfiddle.net/sQVe/tVRwm/1/

这取决于你想要多少延迟，我使用了 500 毫秒。

笔记

.each()不需要，您可以立即调用.hover()集合div。我包括在内.each()是因为我不知道您是否想做的不仅仅是绑定悬停事件。

于 2012-08-23T17:42:38.257 回答