이 코드 블록에서 어떻게 hoverIntent를 시뮬레이트 할 수 있습니까?

Question

나는 previous topic에서 같은 질문을했지만 다른 사람이 이것을 위해 다른 것을 열어야한다고 말했습니다. 그래서 여기에 간다 :

나는 네비게이션 뒤에 리본을 움직이고 있는데, 문제는 시작 위치로 돌아가서 다음 요소로 돌아가는 대신에 애니메이션 된 요소를 이전 위치에 유지하고 싶다는 것이다. hoverIntent를 사용하지 않고이 작업을 수행 할 수있었습니다. 이제 리본이 탐색에서 매 움직임을 감지합니다. 이 문제를 어떻게 방지 할 수 있습니까?

내가 틀렸지 만 delay() 및 setTimeout()이 정지 지점에 관계없이 마지막 애니메이션을 실행하므로이 시점에서 이해가되지 않으면 수정하십시오. 마우스가 지나가고있는 경우 마우스 센터가 작동하지 않게하려면 어떻게합니까? 아마도 마우스가 300 밀리 초 동안 호버링 블록에서 안정적인 것처럼 mouseover에 if 절이 있을까요?

참고 : noconflict 스크립트를 실행 중이므로 j = $입니다.

function rbHover(){ 


    j("#nav li a") 
     .on('mouseenter', function() { 

     var l = j(this).parent().position().left; 
     var w = j(this).parent().width(); 
     var rbw = Math.round(w/4); 
     var rbh = Math.round(w/16); 

      j("#ribbon").stop('ribbon', true, true).animate({ 
       "left" : l, 
       "width" : w }, { 
        duration: 600, 
        easing: 'swing', 
        queue: 'ribbon' 
       }).dequeue('ribbon'); 

      j(".rib-left").stop('rib-left', true, true).animate({ 
       "border-right-width": rbw, 
       "border-left-width": rbw, 
       "border-top-width": rbh, 
       "border-bottom-width": rbh, 
       "bottom": "-" + (2*rbh) + "px"}, { 
        duration:600, 
        easing: 'linear', 
        queue: 'rib-left' 
       }).dequeue('rib-left'); 

      j(".rib-right").stop('rib-right', true, true).animate({ 
       "border-right-width": rbw, 
       "border-left-width": rbw, 
       "border-top-width": rbh, 
       "border-bottom-width": rbh, 
       "bottom": "-" + (2*rbh) + "px"}, { 
        duration:600, 
        easing: 'linear', 
        queue: 'rib-right' 
       }).dequeue('rib-right'); 
     }) 

     .on('mouseleave', function() { 

     var l = j(".active").parent().position().left; 
     var w = j(".active").parent().width(); 
     var rbw = Math.round(w/4); 
     var rbh = Math.round(w/16); 

      j("#ribbon").stop('ribbon', true).delay(300, 'ribbon').animate({ 
       "left" : l, 
       "width" : w }, { 
        duration: 600, 
        easing: 'swing', 
        queue: 'ribbon' 
       }).dequeue('ribbon'); 

      j(".rib-left").stop('rib-left', true, true).delay(300, 'rib-left').animate({ 
       "border-right-width": rbw, 
       "border-left-width": rbw, 
       "border-top-width": rbh, 
       "border-bottom-width": rbh, 
       "bottom": "-" + (2*rbh) + "px"}, { 
        duration:600, 
        easing: 'linear', 
        queue: 'rib-left' 
       }).dequeue('rib-left'); 

      j(".rib-right").stop('rib-right', true, true).delay(300, 'rib-right').animate({ 
       "border-right-width": rbw, 
       "border-left-width": rbw, 
       "border-top-width": rbh, 
       "border-bottom-width": rbh, 
       "bottom": "-" + (2*rbh) + "px"}, { 
        duration:600, 
        easing: 'linear', 
        queue: 'rib-right' 
       }).dequeue('rib-right'); 
     }); 
} 

당신은 나의 웹 사이트를 찾을 수 있습니다 : 그것은 대기 있도록 www.egegorgulu.com

Answer 1

이 시도 ...

function rbHover(){ 
    var timeoutID = 0; 
    var hoverInterval = 300; 

    j("#nav li a") 
     .on('mouseenter', function() { 
      clearTimeout(timeoutID); 
      timeoutID = setTimeout(mouseEnter, hoverInterval, this); 
     }) 
     .on('mouseleave', function() { 
      clearTimeout(timeoutID); 
      timeoutID = setTimeout(mouseLeave, hoverInterval); 
     }); 

    function mouseEnter(el) { 
     var l = j(el).parent().position().left; 
     var w = j(el).parent().width(); 
     var rbw = Math.round(w/4); 
     var rbh = Math.round(w/16); 

     j("#ribbon").animate({ 
      "left" : l, 
      "width" : w }, { 
      duration: 600, 
      easing: 'swing', 
      queue: 'ribbon' 
     }).dequeue('ribbon'); 

     j(".rib-left").stop().animate({ 
      "border-right-width": rbw, 
      "border-left-width": rbw, 
      "border-top-width": rbh, 
      "border-bottom-width": rbh, 
      "bottom": "-" + (2*rbh) + "px"}, { 
       duration:600, 
       easing: 'linear', 
       queue: 'rib-left' 
      }).dequeue('rib-left'); 

     j(".rib-right").stop().animate({ 
      "border-right-width": rbw, 
      "border-left-width": rbw, 
      "border-top-width": rbh, 
      "border-bottom-width": rbh, 
      "bottom": "-" + (2*rbh) + "px"}, { 
       duration:600, 
       easing: 'linear', 
       queue: 'rib-right' 
      }).dequeue('rib-right'); 
    } 

    function mouseLeave() { 
     var l = j(".active").parent().position().left; 
     var w = j(".active").parent().width(); 
     var rbw = Math.round(w/4); 
     var rbh = Math.round(w/16); 

     j("#ribbon").stop('ribbon', true).animate({ 
      "left" : l, 
      "width" : w }, { 
      duration: 600, 
      easing: 'swing', 
      queue: 'ribbon' 
     }).dequeue('ribbon'); 

     j(".rib-left").stop('rib-left', true, true).animate({ 
      "border-right-width": rbw, 
      "border-left-width": rbw, 
      "border-top-width": rbh, 
      "border-bottom-width": rbh, 
      "bottom": "-" + (2*rbh) + "px"}, { 
       duration:600, 
       easing: 'linear', 
       queue: 'rib-left' 
      }).dequeue('rib-left'); 

     j(".rib-right").stop('rib-right', true, true).animate({ 
      "border-right-width": rbw, 
      "border-left-width": rbw, 
      "border-top-width": rbh, 
      "border-bottom-width": rbh, 
      "bottom": "-" + (2*rbh) + "px"}, { 
       duration:600, 
       easing: 'linear', 
       queue: 'rib-right' 
      }).dequeue('rib-right'); 
    } 
} 

은 그냥 mouseenter 이벤트에 간격을 추가했습니다 실행하기 전에 hoverInterval을 변경하십시오.