动态标签 悬停效果 延迟加载

//----------------------------------------------------------------对于动态的标签绑定事件--------------------------------------------------------------------------------

var outTimer;//执行时间
  var upTimer;//执行时间
  var sqDiv = $("#tm");//要显示的div
  var test="";//标识，为了将鼠标移到显示的div上时，div不会消失
  var dd = "";//划过某一字段传的值
  function test1(){
   $("#tm").empty();//现将div清空
   $.ajax({  //往里加数据
    type:"post",
    url:"<%=path %>/webmodule/constructionDecision/BaseCD/getCommunityInfo.do?stCode="+dd,
    dataType:"json",
    async:false,
    success:function(data){
     var td="";
       for(var i=0;i<data.length;i++){
        td+="<a id ='"+data[i].gridNumber+"'>"+data[i].name+"</a>";
       }
        $("#tm").append(td);
    }
   });
   $("#tm").show();
  }
  
  function test2(){//隐藏div的方法
   if(test ==""){
    $("#tm").hide();
   }
  }
  $("#cityTable a").die().live('mouseover mouseout', function(event) {  //给动态标签绑定事件
   
   if(event.type=='mouseover'){ //移上时
    clearTimeout(outTimer);//先清空移出的时间，这样能避免鼠标划过就执行函数，减轻服务器的压力
    dd=$(this).attr("id");
    upTimer = setTimeout(test1, 500);//0.5秒后再执行
   }
   if(event.type=='mouseout'){
    sqDiv.hover(
    function(){
     test = "on";//说明鼠标在显示的div上
    },function(){
     test = "";
     test2();
    });
    clearTimeout(upTimer);
    outTimer = setTimeout(test2, 500);
   }
  });

 

 

 

 

//--------------------------------------------------------------------非动态标签（查询资料）--------------------------------------------------------------------------

 

//hoverDuring       鼠标经过的延时时间
   //outDuring          鼠标移出的延时时间
   //hoverEvent        鼠标经过执行的方法
   //outEvent         鼠标移出执行的方法
 $( 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() {
    $(this).hover( function() {
     clearTimeout(outTimer);
     hoverTimer = setTimeout(sets.hoverEvent, sets.hoverDuring);
    }, function() {
     clearTimeout(hoverTimer);
     outTimer = setTimeout(sets.outEvent, sets.outDuring);
    });
   });
  }
  

 //$("#sosoFod h3").each( function() {
 $("#sosoweb").each( function() {
   var test = "";//当test为空时，鼠标移到字段显示div，移出隐藏div
   var that = $(this);
   var id = that.attr("id");
   var div = $("#tm");
   div.css("position", "absolute");//让这个层可以绝对定位 
    that.hoverDelay( {
     outDuring :1000,
     hoverEvent : function() {
      div.css("display", "block");
       var p = that.position(); //获取这个元素的left和top 
             var x = p.left + that.width();//获取这个浮动层的left 
             var docWidth = $(document).width();//获取网页的宽 
            if (x > docWidth - div.width() - 20) { 
              x = p.left - div.width(); 
            } 
            div.css("left", x); 
            div.css("top", p.top); 
      //$("#tm").show();
      
     },
     outEvent : function() {
      
      $("#tm").hoverDelay( {
       outDuring :1000,
       hoverEvent : function() {
       test = "on";
       $("#tm").show();
      },
      outEvent : function() {
      test="";
       $("#tm").hide();
      }
    });
    if(test==""){
     $("#tm").hide();
    }
    
     }
    });
    
   
  })；