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かなりの時間 on をmouseenter使用してから on を使用するclearTimeoutと、 hovers にわずかな遅延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/

どのくらいの遅延が必要かはあなた次第です。私は 500ms を使用しました。

ノート

は必要ありません。コレクションで をすぐに.each()呼び出すことができます。ホバーイベントをバインドする以上のことをしたいかどうかわからないので、含めました。.hover()div.each()

于 2012-08-23T17:42:38.257 に答える