zoukankan      html  css  js  c++  java
  • jQuery延迟执行的方法,常用于TAB效果和各种切换效果

    首先放代码(代码源于网络)

    $(function(){
        $.fn.hoverDelay = function(options){
            var defaults = {
                hoverDuring: 200,
                outDuring: 200,
                hoverEvent: function(){
                    $.noop();
                },
                outEvent: function(){
                    $.noop();    
                }
            };
            var sets = $.extend(defaults,options || {});
            var hoverTimer, outTimer;
            return $(this).each(function(){
                var that = this;
                $(this).hover(function(){
                    clearTimeout(outTimer);
                    hoverTimer = setTimeout(function () { if (typeof sets.hoverEvent == 'function') sets.hoverEvent.call(that) }, sets.hoverDuring);
                },function(){
                    clearTimeout(hoverTimer);
                    outTimer = setTimeout(function () { if (typeof sets.outEvent == 'function') sets.outEvent.call(that) }, sets.outDuring);
                });    
            });
        }      
    });

    这个扩展方法的核心内容便是setTimeout,在鼠标移入的时候绑定hoverTimer,移开清除hoverTimer

    首先定义一个defaults对象,定义了移入和移出的延迟时间,和移入移出的事件,事件内为$.noop()这个空函数

    该方法接受一个参数 options

    然后用$.extend方法用options扩展了defaults,并且保存到sets中,这样使得你能在调用的时候自定义defaults的属性和方法

    然后就是hover()方法了

    调用的时候

        $('#art_tit0 li').hoverDelay({
            hoverEvent:function(){
                var index = $(this).index();
                $(this).addClass('cur').siblings().removeClass('cur');
                $('#art_con0 div.allic').hide().eq(index).fadeIn('fast');
            }
        });
  • 相关阅读:
    第一次个人作业-热身
    OO总结
    oo第三单元总结
    oo第二单元总结
    软件工程 —— 课程回顾与个人总结
    BUAA软件案例分析——智能表单抽取识别
    软件工程—结对项目博客
    轨迹预测文献阅读整理(轨迹多样性、车辆轨迹、图神经网络、潜码)
    软件工程
    软件工程
  • 原文地址:https://www.cnblogs.com/leesen/p/5507959.html
Copyright © 2011-2022 走看看