jQueryのマウスオーバー(ホバー)イベントの遅延処理 example_jquery

1. マウスホバーイベントと遅延について
マウス通過イベントは、Web ページ上で非常に一般的なイベントの 1 つです。単純なホバーは CSS :hover 疑似クラスを使用して実装でき、より複雑なものは js を使用して実装できます。

通常の状況では、マウスホバーイベントの処理は遅延しません。ただし、不要な干渉を避けるために、マウス ホバー イベントが遅延されることがよくあります。いわゆる干渉とは、ユーザーが誤ってリンクやタブなどの領域をマウスで触れたときに、ホバーイベント（またはマウスオーバーイベント）がこれらにバインドされているため、非表示レイヤーが表示されなかったり、タブが切り替わったりすることを意味します。要素)、これらの時間は遅延なく即座にトリガーされるため、ユーザーの邪魔になります。

たとえば、Tencent ホームページでは、タブ



やその上部の Soso ナビゲーション バーなど、ほとんどすべてのマウス通過イベントが遅延します。下の図を参照してください:



2. 例とデモ
この記事の主な内容は、私が数日前に書いたマウス遅延方法を示すことです。 jQuery の下では品質が低いため、参照のみを目的としています。この記事では、Tencent のホームページにある Soso 検索バーのマウス通過効果を例として取り上げ、jQuery での遅延処理を示します。下の図は、デモ ページの効果のスクリーンショットです。



3. コードと実装
遅延といえば、ウィンドウの下の setTimeout メソッドなしではできません。この例でも、jQuery メソッドの中心となるのは setTimeout です。コードは長くありません。完全なコードは次のとおりです:

コードをコピーします コードは次のとおりです:

(function ($){
$.fn.hoverDelay = function(options){
var defaults = {
hoverDuring: 200,
outDuring: 200,
hoverEvent: function(){
$.noop();
}、
outEvent: function(){
$.noop();
}; 🎜>var セット = $.extend(defaults ,options || {});
var hoverTimer, outTimer
return $(this).each(function(){
$(this).hover; (function(){
clearTimeout( outTimer);
hoverTimer = setTimeout(sets.hoverEvent,ets.hoverDuring);
},function(){
clearTimeout(hoverTimer);
outTimer = setTimeout(sets.outEvent, sets.outDuring );
});



このコードの目的は、マウスにイベントを渡すことです。遅延、遅延、遅延のクリアの分離は、この方法によって解決されました。必要なのは、遅延時間と、対応するマウスの通過または削除イベントを設定することだけです。簡単な例として、次のコードを見てみましょう:

コードをコピーします

コードは次のとおりです: $("#test").hoverDelay({ hoverEvent: function(){ alert("パスしてください!");

}

});

は、ID test を持つ要素が、マウスがその上を通過してから 200 ミリ秒後に「Pass me!」というテキストを含むポップアップ ボックスをポップアップ表示することを意味します。

わかりました。この記事の例に適用してください。

Tencent.com のホームページの検索ボックスのマウスの遅延に加えて、jQuery-Ma Huateng の製品デザインの一部を使用したスキンの変更についても言及する価値があります。ユーザー エクスペリエンス テクノロジーの実装記事では、ここをクリックすると対応するデモ ページが表示されます: Tencent ホームページのパーソナライズされたスキン変更デモ ページ

まず、Tencent ホームページの検索バーのメイン HTML 構造フィールド コードを表示します。 🎜>




コードをコピー


コードは次のとおりです:

网页

画像

ビデオ

音乐

搜吧

问问

博客

続き▼

• 综合


• 新闻


• 词典


• 生活


• 百科


• すべての商品

は、パケット交換のように、最初のコードと一致する。ここで何の技術も含まない遅延方法を使用した後、次のようなコードを使用して実行することができる。

复制代码代码如下: $(".s2").each(function(){

$ ("#sosoFod h3").each(function(){

var that = $(this);
var id = that.attr("id");
if(id){
that.hoverDelay({
hoverEvent: function(){
$(".s1").attr("クラス","s2");
that.attr("クラス","s1 "); //感谢“type23”提供绑定对メソッド
$(this).attr("class","s1");
}
});
}else{
that.hoverDelay({
outDuring: 1000,
hoverEvent: function(){
$("#tm").show();
},
outEvent: function (){
$("#tm").hide()
}
});


唉，惭愧

は基本的にすべて、キーボード面にあるコードです。

hoverDelay メソッドには 4 つのパラメータがあり、以下のように示します:

hoverDuring ネズミ标移動の遅延時間
outDuring ネズミ标移動の遅延時間
hoverEvent ネズミ标移動の実行方法
outEvent実行方法