Firefox의 mouseenter/mouseleave

Question

마우스를 가져 가면 (mouseenter/mouseleave) jQuery의 easing 플러그인을 사용하여 easeOutBounce 링크를 만드는 스크립트가 있습니다. 또한 내 이미지가 css 스프라이트를 사용하여 생성되므로 hover 상태에 따라 X 및 Y 위치가 변경되므로 jQuery에서 CSS 스타일링을 사용합니다. Firefox와 별도로 브라우저에서 정상적으로 작동합니다.

누군가가 전에이 문제를 가로 질러왔다 궁금 해서요 그리고 그들이 발견 할 수있는 솔루션이 문제를 해결하기 위해? 나는 mouseenter/mouseleave 메소드와 관련이 있다는 것을 연구 조사에서 확인했다.

(예를 재라는 이름의 클래스와 사업부의의를 보여줍니다)

$(function() { 
    $('#navigation').on('mouseenter', '#link-1:not(.selected)', function() { 
     $(this).stop().animate({ 
      backgroundPositionX:0, 
      backgroundPositionY:0 
     }, 1000, 'easeOutBounce'); 
    }).on('mouseleave', '#link-1:not(.selected)', function() { 
     $(this).stop().animate({ 
      backgroundPositionX:0, 
      backgroundPositionY:-156 
     }, 700, 'easeOutBack'); 
    }); 
}); 

이 페이지의 다른 링크를 반복한다 : 여기

코드가 링크 작동 방법의 예입니다.

/* FF 제안으로 편집 - 배경 요소가 마음에 들지 않지만 이렇게 편집하면 약간 효과가 있지만 배경 pos의 호버 상태는 00이어야하고 -84는 좋지 않으며 호버가 스프라이트를 가져옵니다. 측면보다는 아래쪽!

$(function() { 
    $('#navigation #link-1:not(.selected)').hover(
function() { 
     $(this).stop().animate({ 
      'background-position':0 
     }, 1000, 'easeOutBounce'); 
}, 
function() { 
     $(this).stop().animate({ 
      'background-position': 0 -156 
     }, 700, 'easeOutBack'); 
    } 
    ); 
}); 

Answer 1

나는이 문제를 이해하지 못한다. mouseleave가 트리거되지 않는 문제가 발생하는 경우 mouseenter/mouseleave 대신 hover() 함수를 사용하여 해결했습니다.

이 코드를 사용해 볼 수 있습니까?

$(function() { 
    $('#navigation #link-1:not(.selected)').hover(
function() { 
     $(this).stop().animate({ 
      backgroundPositionX:0, 
      backgroundPositionY:0 
     }, 1000, 'easeOutBounce'); 
}, 
function() { 
     $(this).stop().animate({ 
      backgroundPositionX:0, 
      backgroundPositionY:-156 
     }, 700, 'easeOutBack'); 
} 
); 
}); 

문제가 애니메이션 때때로 "불안해"라고하면 정지 정지 기능을 변경 (참, 참)