jQuery ホバー遅延実装 code_jquery

例:

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

$('#foo' ).slideUp( 300).lay(800).fadeIn(400); // .slideUp() と .fadeIn() の間は 800 ミリ秒遅延します。

ホバーはディレイラーをデザインできますか?答えは「はい」です。遅延操作の目的は、ユーザーが誤ってイベントをトリガーするのを防ぐことです。通常、マウス ポインターの滞在時間が 150 ミリ秒未満の場合は無視できます。実際、遅延が侵入した場合は、ホバー イベントで使用できます。ただし、John Resig が jQuery を頻繁に使用することによって引き起こされる互換性の問題を避けるために、標準のプラグインを正直に作成する方が良いでしょう。
目標
jQuery API の優雅さを継承する: jQuery(expression).mouseDelay(150).hover(over, out)
jQuery プロトタイプ チェーンを壊さない
上記の目標はクールに見えますが、実装するのは難しいです 非常に簡単で、コードはわずか 10 行強です 記事をまとめるのが恥ずかしいです:
ソース コード

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

/*!
* jQuery.mouseDelay.js v1.2
* http://www.planeart.cn/ ?p=1073
* Copyright 2011 , TangBin
* MIT または GPL バージョン 2 ライセンスに基づいてデュアルライセンスされています。
*/
(function ($, plugin) {
var data = { }, id = 1, etid = プラグイン '
// 遅延コンストラクター
$.fn[plugin] = function (speed, group) {
id = group || this.data(etid) || id;
speed = Speed || 150;
if (group === id) this.data(etid, group);
// 一時的な公式 hover メソッド
this._hover = this.hover;
// ホバー関数を偽装し、2 つのコールバック関数をインターセプトし、処理のために実際のホバー関数に渡します。 this.hover = 関数 (オーバー、アウト) {
オーバー = オーバー ||
アウト = アウト ||
this._hover(イベント) {
var elem = this;
clearTimeout( data[group]);
data[group] = setTimeout(function () {
over.call(elem,event);
}, 速度);
}, function (event) {
var elem = this;
data[group] = setTimeout(function () {
out.call() elem,event);
});
return this;
}; elements
$.fn [plugin 'Pause'] = function () {
clearTimeout(this.data(etid))
return this;
}; 🎜>$[plugin] = {
// 一意のグループ名を取得します
get: function () {
return id;
},
// 指定されたグループのディレイラーをフリーズします
一時停止: function ( group) {
clearTimeout(data[group]);
})(jQuery, 'mouseDelay'); 🎜>

API の説明






ダウンロード

jQuery.mouseDelay.js

jQuery.mouseDelay.min.js

方法	参数	说明
mouseDelay (speed, group)	速度, 设置延时分组名称	设置延时触发效果. 两个参数都是可选的
mouseDelayPause()	[无]	冻结选定元素的延时器
jQuery.mouseDelay.pause (group)	延时分组名称	冻结指定分组的延时器
jQuery.mouseDelay.get ()	[无]	获取一个不重复的分组名

デモ

http://demo.jb51.net/js/2011/mouseDelay /index.htm

• パッケージダウンロード
• planeArt.cn 元記事