jQuery 특별 이벤트 호버 넌트가`mouseleave` 함수와 함께 제대로 작동하지 않습니다.

Question

jQuery 특별 이벤트 hoverintent을 mouseleave 함수와 함께 사용하는 데 문제가 있습니다. 는 mouseleave 이벤트 만 발사 될 수 있도록 사용자의 마우스 감도 임계 값 아래 둔화 때 나는 같은 기능을 활용할 필요가

(나는 또한 mouseleave에 대한 mouseout를 대체하려고했습니다).

나는 스크립트 아래에 포함했다, 또한 그것은이에 포함을 위해 특별히 설계 되었기 때문에 jQuery의 hoverintent 특별 이벤트 코드가 여기에 작동하지 않습니다 밝혀 http://click2fit.com/test_files/accordion_hoverintent.html

$(function() {  
    $(".accordion_close_leave").accordion({ 
       event: "click hoverintent", 
       collapsible: true, 
       active: false,  
       autoHeight: false, 
      }).mouseleave(function() { 
    $(this).accordion({ active: false}); 
    }); 

var cfg = ($.hoverintent = { 
    sensitivity: 100, 
    interval: 500 
}); 
$.event.special.hoverintent = { 
    setup: function() { 
     $(this).bind("mouseover", jQuery.event.special.hoverintent.handler); 
    }, 
    teardown: function() { 
     $(this).unbind("mouseover", jQuery.event.special.hoverintent.handler); 
    }, 
    handler: function(event) { 
     var that = this, 
      args = arguments, 
      target = $(event.target), 
      cX, cY, pX, pY; 
     function track(event) { 
      cX = event.pageX; 
      cY = event.pageY; 
     }; 
     pX = event.pageX; 
     pY = event.pageY; 
     function clear() { 
      target 
       .unbind("mousemove", track) 
       .unbind("mouseout", arguments.callee); 
      clearTimeout(timeout); 
     } 
     function handler() { 
      if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) { 
       clear(); 
       event.type = "hoverintent"; 
       event.originalEvent = {}; 
       jQuery.event.handle.apply(that, args); 
      } else { 
       pX = cX; 
       pY = cY; 
       timeout = setTimeout(handler, cfg.interval); 
      } 
     } 
     var timeout = setTimeout(handler, cfg.interval); 
     target.mousemove(track).mouseout(clear); 
     return true; 
    } 
}; 

Answer 1

에 작업 예제를 업로드 아코디언의 이벤트 옵션 (연관된 패널을 활성화하기 위해 아코디언 헤더가 반응하는 이벤트로 정의 됨)

좋은 소식은 내가 스크립트 아래에 포함했습니다 :-D Brian Cherne's hoverintent plugin가하는, 그리고 작업 바이올린은 여기에 있습니다 : http://jsfiddle.net/chayacooper/GZV5V/26/

그것은 있도록 아코디언 자체에하는 MouseLeave를 결합하는 것을 기억하는 것이 중요합니다 그것 사용자가 전체 아코디언에서 마우스를 뗄 때까지 트리거되지 않습니다. 사용자가 이동할 때 머리글을 즉시 클릭하면 이중 활성화와 관련하여 작은 문제가 있지만 선택 항목을 아코디언 내부에서 사용할 수 있도록 허용하려고합니다.

$(document).ready(function() { 
$("#Trigger2").accordion({ 
    active: false, 
    collapsible: true 
}).hoverIntent({ 
    over: function() {}, 
    out: function() { 
     $('.ui-accordion-header-active', this).trigger('click').blur(); 
    }, 
    timeout: 1000 
}) 

.children('h3').hoverIntent({ 
    over: function() { 
     $(this).not('.ui-accordion-header-active').trigger('click'); 
    }, 
    out: function() {}, 
    timeout: 1000 
}); 
});