jQuery hoverIntent 문서가 준비되어있는 상태에서 마우스가 이미 요소 위에있는 경우 발생하지 않습니다.

Question

jQuery 플러그인 hoverIntent를 사용하고 있습니다. 문제는 페이지가로드되고 마우스가 이미 '#gallery'객체 위에 있으므로 hoverIntent 코드를 트리거하지 않을 때가 있습니다.

이

$(document).ready(function(){ 
    $('#gallery').hoverIntent(function(){ 
    $('.gallery-thumbs').stop().animate({'height': '65px'},400); //in code animating a element child within #gallery 
    },function(){ 
    $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery 
    }); 
}); 

이

사람이에 대한 해결책을 알고 있나요 : 여기

내 코드의 예입니다?

Answer 1

이 라이브러리를 계속 사용하려면 mousemove 이벤트로 첫 번째 (그리고 처음으로 one) mousemove 이벤트를 포착하고 마우스가 #gallery 위에 있는지 확인하십시오. 이벤트가있는 경우

는이를 사용하여 객체를 통해 확인할 수 있습니다

var eventIsOver = function(event, o) { 
    if ((!o) || o==null) return false; 
    var pos = o.offset(); 
    var ex = event.pageX; 
    var ey = event.pageY; 
    if (
     ex>=pos.left 
     && ex<=pos.left+o.width() 
     && ey>=pos.top 
     && ey<=pos.top+o.height() 
    ) { 
     return true; 
    } 
    return false; 
}; 


$(document).ready(function(){ 
    $('body').one('mousemove', function(e) { 
    if (eventIsOver(e, $('#gallery')) { 
     // do what you want to do if the mouse is on the gallery initially 
    } 
    }); 
    $('#gallery').hoverIntent(function(){ 
    $('.gallery-thumbs').stop().animate({'height': '65px'},400); //in code animating a element child within #gallery 
    },function(){ 
    $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery 
    }); 
}); 

Answer 2

이 당신이 찾고있는 무엇인가?

$(document).ready(function(){ 
    $(document).one("mousemove", function(e) { 
     if (mouse pointer is on gallery) { 
      $('.gallery-thumbs').stop().animate({'height': '65px'}, 400); 
     } 
    }); 

    $('#gallery').hoverIntent(function() { 
     $('.gallery-thumbs').stop().animate({'height': '65px'}, 400); //in code animating a element child within #gallery 
    },function() { 
     $('.gallery-thumbs').stop().animate({'height': '33px'}); //out code animating a child element within #gallery 
    }); 
}); 

Answer 3

내가 완벽한 솔루션을 포기하고 다른 해결책을 찾는 사람들을 위해 #gallery

$('.gallery-nav').mouseenter(function(){ 
    $('#gallery').trigger("mouseenter"); 
}); 

Answer 4

내 자식 요소에 mouseenter을 트리거 살고 있고, 여기 내 꺼야 :

$('myselector').hoverIntent({ 
    over: myOverfunc, 
    out: myOutfunc 
}); 

$('myselector').trigger('mouseenter.hoverIntent'); 

지불 'mouseenter.hoverIntent'에 대한주의는 플러그인에 의해 등록 된 이벤트이므로 (r7에서 테스트 됨).

그것은 선수가 JS에서 몇 가지 버그 몇 가지 문제를 가지고

Answer 5

,

는 이미 모든 노력을 다했다. 당신은 방금 옵션을 추가해야합니다.

나는 그것을 풀었다. 여기에서 js를 얻을 수 있습니다. 당신은 slimscroll 기능은 옵션 아래

mouseOver로 추가 호출 할 때 데모로

사실을

jQuery('#scroll').slimScroll({ 
     height: jQuery(window).height()+'px', 
     railVisible: true, 
     allowPageScroll: true, 
     mouseOver:true 
    }); 

Visit Link/Download Here