美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > 美高梅官方网站开户延时器实现代码

美高梅官方网站开户延时器实现代码

发布时间:2019-09-17 11:07编辑:美高梅官方网站开户浏览(155)

    例如:

    复制代码 代码如下:

    $('#foo').slideUp(300).delay(800).fadeIn(400);// 在.slideUp() 和 .fadeIn()之间延时800毫秒。

    hover是否可以设计一个延时器呢?答案是肯定的。延时操作目的是为了防止用户误触发事件,一般情况下鼠标指针小于150毫秒的停留时间都可以被忽略。其实,如果入侵delay全能让其作用在hover事件上,但是为了避免John Resig不断的折腾jQuery而导致兼容问题,还是老老实实的写标准插件比较好。
    目标
    继承jQuery API的优雅:jQuery(expression).mouseDelay(150).hover(over, out)
    不得破坏jQuery原型链
    上述目标看起来很帅气,实现起来却非常简单,仅仅十多行的代码我都不好意思拿来拼凑文章:
    源代码

    复制代码 代码如下:

    /*!
    * jQuery.mouseDelay.js v1.2
    *
    * 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说明

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

    **下载

    **

    • jQuery.mouseDelay.js
    • jQuery.mouseDelay.min.js

    演示 

    打包下载

    planeArt.cn原创文章

    您可能感兴趣的文章:

    • 网页图片延时加载的js代码
    • JavaScript延时效果比较不错的
    • js实现网页图片延时加载 提升网页打开速度
    • JS图片根据鼠标滚动延时加载的实例代码
    • JS延时提示框实现方法详解
    • 原生javaScript实现图片延时加载的方法
    • javascript实现延时显示提示框特效代码
    • jQuery 鼠标经过(hover)事件的延时处理示例
    • Jquery实现图片预加载与延时加载的方法
    • jQuery实现鼠标经过事件的延时处理效果
    • jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
    • JS/jQuery实现DIV延时几秒后消失或显示的方法

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:美高梅官方网站开户延时器实现代码

    关键词: 美高梅开户

上一篇:jq失效问题

下一篇:没有了