動的ラベルのホバー効果の遅延読み込みサンプル code_jquery

------------------------動的ラベル バインディング イベントの場合---------- - --

コードをコピー コードは次のとおりです:

var outTimer;//実行時間
var upTimer;//実行時間
var sqDiv = $("#tm");//表示される div
var test="";//マウスを動かすための識別表示されている 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 ; itd ="" data[i].name "";
$("#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) = 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 set = $.extend(defaults , options || {});
var hoverTimer, outTimer;
return $(this).each( function() {
$(this).hover( function() {
clearTimeout( outTimer);
hoverTimer = setTimeout(sets.hoverEvent,ets.hoverDuring);
}, function() {
clearTimeout(hoverTimer);
outTimer = setTimeout(sets.outEvent,ets.outDuring );
});
}); コードは次のとおりです:


// $("#sosoFod h3").each( function() {
$("#sosoweb").each( function() {
var test = "";//test が空の場合、フィールドにマウスを移動すると、div が表示され、非表示の div から移動します。
var that = $(this);
var div = $(" #tm");
div.css("position", "absolute");//このレイヤーを絶対位置にします
that.hoverDelay( {
outDuring : 1000,

hoverEvent: function () {
div.css("display", "block");

var p = that.position(); // この要素の左と上を取得します var x = p.left; that.width();//このフローティングレイヤーの左側を取得しますvar docWidth = $(document).width();//Webページの幅を取得しますif (x > docWidth - div .width() - 20) { x = p.left - div.width(); } div.css("left",

div.css ("top") ", p.top);

//$("#tm").show();

},
outEvent : function() {

$(" #tm").hoverDelay( {
outDuring :1000,
hoverEvent : function() {
test = "on";
$("#tm").show() ;
},
outEvent : function() {
$("#tm").hide();
}
if( test==""){
$("#tm").hide()
}
}
});