jQuery hover 지연 기 구현 코드

3012 단어 jQueryhover지연 기
예 를 들 어
 
$('#foo').slideUp(300).delay(800).fadeIn(400);// .slideUp() .fadeIn() 800 。
hover 는 지연 기 를 설계 할 수 있 습 니까?답 은 긍정 적 이다.지연 작업 의 목적 은 사용자 가 발생 하 는 사건 을 방지 하기 위해 서 입 니 다.일반적으로 마우스 포인터 가 150 밀리초 이하 의 체류 시간 은 무시 할 수 있 습 니 다.사실 delay 를 침입 하면 hover 사건 에 작용 할 수 있 지만 John Resig 가 jQuery 를 계속 괴 롭 히 지 않도록 호환성 문 제 를 일 으 키 지 않도록 표준 플러그 인 을 성실 하 게 쓰 는 것 이 좋 습 니 다.jQuery API 의 우아 함 을 계승 하 는 목표:jQuery(expression).mousedlay(150).hover(over,out)jQuery 원형 체인 을 파괴 하지 마 세 요.상기 목 표 는 멋 있어 보이 지만 실현 하기 에는 매우 간단 합 니 다.10 여 줄 의 코드 만 가지 고 와 서 글 을 맞 추기 가 부 끄 럽 습 니 다.소스 코드
 
/*!
* jQuery.mouseDelay.js v1.2
* http://www.planeart.cn/?p=1073
* Copyright 2011, TangBin
* Dual licensed under the MIT or GPL Version 2 licenses.
*/
(function ($, plugin) {
var data = {}, id = 1, etid = plugin + 'ETID';
//
$.fn[plugin] = function (speed, group) {
id ++;
group = group || this.data(etid) || id;
speed = speed || 150;
//
if (group === id) this.data(etid, group);
// hover
this._hover = this.hover;
// hover , hover
this.hover = function (over, out) {
over = over || $.noop;
out = out || $.noop;
this._hover(function (event) {
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);
}, speed);
});
return this;
};
return this;
};
//
$.fn[plugin + 'Pause'] = function () {
clearTimeout(this.data(etid));
return this;
};
//
$[plugin] = {
//
get: function () {
return id ++;
},
//
pause: function (group) {
clearTimeout(data[group]);
}
};
})(jQuery, 'mouseDelay');
API 설명

#api table { width:99%; }
#api table th { color:#808080; font-weight:bold; text-shadow:1px 1px #FFF; }
#api td, #api th { padding:3px; }
#api td.time,#api th.time { color: #999; text-align: right; width: 110px; }
#api tr.odd td,#api tr.odd th { background-color:#F7F9FD; }
방법.
매개 변수
설명 하 다.
mouseDelay (speed, group)
속도,지연 그룹 이름 설정
지연 트리거 효 과 를 설정 합 니 다.두 매개 변 수 는 모두 선택 할 수 있 습 니 다.
mouseDelayPause()
[없 음]
선택 한 요소 의 지연 기 를 동결 합 니 다.
jQuery.mouseDelay.pause (group)
지연 그룹 이름
지정 한 그룹 지연 기 동결
jQuery.mouseDelay.get ()
[없 음]
중복 되 지 않 는 그룹 이름 다운로드 가 져 오기
  • jQuery.mouseDelay.js
    시연  .planeArt.cn 오리지널 글
  • 좋은 웹페이지 즐겨찾기