1

mouseoutの要素を非表示にするコードがあります。

コードは次のようになります。

var myMouseOutFunction = function (event) {

    setTimeout(function () {

    $(".classToHide").hide();

    $(".classToShow").show();

    }, 200);

};

これにより、私がやりたいことに非常に近い結果が得られます。ただし、タイムアウトの時間（この場合は200ミリ秒）を待ってから、マウスがまだ要素から「外れている」かどうかを確認します。もしそうなら、私は目的の要素に対して.hide（）と.show（）を実行したいと思います。

これを実行したいのは、ユーザーが少しマウスを外してからすばやくマウスを戻した場合、ユーザーが要素を見たいだけのときに要素がちらつく（つまり、非表示にしてから実際にすばやく表示する）ことを望まないためです。

4

4 に答える 4

6

タイムアウトの戻り値を変数に割り当ててからclearTimeout、onmouseoverイベントで使用します。

于 2012-10-10T18:22:40.007 に答える
1

mouseenterとmouseleavejqueryを使用する必要があります。mouseenterとmouseleaveは一度だけ呼び出されます。また呼び出されるかどうかを確認する場合は、フラグを使用しmouseenterます。

  var isMouseEnter ;
    var mouseLeaveFunction = function (event) {
       isMouseEnter = false;
        setTimeout(function () {
             if(isMouseEnter ){ return;}
             $(".classToHide").hide();

                $(".classToShow").show();

           }, 200);
    };
    var mouseEnterFunction = function(){

        isMouseEnter = true;
     }
于 2012-10-10T18:23:21.890 に答える
1

ブールフラグを使用します。

var mustWait = true;
var myMouseOutFunction = function (event) {

    setTimeout(function () {
        if(mustWait){
            mustWait = false;
        }
        else{
            $(".classToHide").hide();
            $(".classToShow").show();
            mustWait = true;
       }
    }, 200);
};
于 2012-10-10T18:24:34.047 に答える
1

Kolinkの回答の詳細

デモ：http： //jsfiddle.net/EpMQ2/1/

var timer = null;
element.onmouseout = function () {
    timer = setTimeout(function () {
      $(".classToHide").hide();
      $(".classToShow").show();
    }, 200);
}

element.onmouseover = function () {
    clearTimeout(timer);
}
于 2012-10-10T18:28:26.813 に答える