2009-09-30 7 views
3

를 추가하는 방법을 나는 JQuery와 대화 당신과 같이 이미지 위에 마우스를 올려 (http://docs.jquery.com/UI/Dialog) 상자를 팝업 일부 JQuery와 있습니다JQuery와 : 호버 기능, 지연

$(document).ready(function() { 
     $("img").hover(function() { 

      $("#dialog").dialog(); 
     }); 
    }); 

내가이 개 질문 1 있습니다. 대화 상자를 닫은 다음 이미지 위로 마우스를 가져 가면 대화 상자가 다시 나타나지 않습니다. 어떻게 해결할 수 있습니까? 1. 사용자가 몇 초 동안 이미지 위에 마우스를 올려 놓으면 어떻게 표시 될 수 있습니까?

답변

4

1 - 먼저 대화 상자를 초기화해야합니다. Code here

$(document).ready(function() { 
    $("#dialog").dialog({ autoOpen: false }); // init without showing 

    $("img").bind("mouseover", function() { 
    $("#dialog").dialog('open'); // open the dialog 
    }); 

}); 

2 - 단지

var _counter = 0; 
var _seconds = 0; 

$("img").hover(function() { 
    // mouseover 
    _counter = setInterval(openDialogNow(), 1000); 
}, function() { 
    // mouseout 
    clearInterval(_counter); 
}); 

function openDialogNow() { 
    // this function will run every second while the user does not mouseout the image 
    _seconds++; // add 1 to the global variable 

    if(_seconds == 3) { // will open in 3 seconds, 3 * 1000 miliseconds 
     _seconds = 0; // reset, so we can reuse later 
     $("#dialog").dialog('open'); // open the dialog 
    } 
} 
6

1) 마우스 오버 /로 마우스 또는 mouseenter /하는 MouseLeave 이벤트를 사용하여 카운터를 사용합니다.

2) 체크 아웃 : http://cherne.net/brian/resources/jquery.hoverIntent.html. 나는 여러 곳에서 사용 해왔고 호버링에 대한 훌륭한 사용자 정의가 가능합니다. 또한 자체 이벤트를 포착하는 포인트 1을 처리합니다.