jQuery 호버 지연기 구현 code_jquery

예:

코드 복사 코드는 다음과 같습니다.

$('#foo' ).slideUp( 300).delay(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 라이센스에 따라 이중 라이센스가 부여되었습니다.
*/
(함수 ($, 플러그인) {
var data = { }, id = 1, etid = 플러그인 ' ETID';// 지연 생성자
$.fn[plugin] = 함수(속도, 그룹) {
id
group || this.data(etid) || id;
speed = speed ||
// 요소에 그룹 이름 캐시
if (group === id) this.data(etid, group);
// 임시 공식 호버 메소드
this._hover = this.hover;
// 호버 함수를 위장하고 두 개의 콜백 함수를 가로채 실제 호버 함수에 넘겨 처리합니다.
this.hover = 함수(오버, 아웃) {
over = 오버 || $.noop;
out = out || $.noop;
this._hover(이벤트) var elem = this;
clearTimeout( data[group]);
data[group] = setTimeout(function () {
over.call(elem, event);
}, speed);
}, function (event) {
var elem = this;
clearTimeout(data[group])
data[group] = setTimeout(function () {
out.call( elem, event);
});
return this
}// 지연 선택됨 elements
$.fn [plugin 'Pause'] = function () {
clearTimeout(this.data(etid))
return this;
}// static method
$[plugin] = {
// 고유한 그룹 이름 가져오기
get: function () {
return id
},
// 지정된 그룹의 지연 프로그램을 고정합니다.
pause: function (group) {
clearTimeout(data[group])
}
})(jQuery, 'mouseDelay')


API 설명

다운로드

jQuery.mouseDelay.js

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

jQuery.mouseDelay.min.js

데모

• http://demo.jb51.net/js/2011/mouseDelay /index.htm
• 패키지 다운로드

planeArt.cn 원본 기사