깜박이는 사파리가있는 JQuery 툴팁

Question

나는 코드를 검토하고 플러그인을 확인하는 데 몇 시간을 보냈다. 툴팁을 만들 때 악몽을 꾼다. 나는 미쳐 가기 전에 도움을 요청했다.

기본적으로 내 툴팁은 한 가지 예외를 제외하고 모든 브라우저에서 완벽하게 실행됩니다. 원정 여행. 내 문제는 어떤 이미지를 넘겨 주면 브라우저가 흰색으로 깜빡이기 시작하며 어떤 해결책도 찾지 못했지만 내 문제는 툴팁 스크립트처럼 보입니다.

JS

this.imagePreview = function() 
{ 
    var xOffset = 10; 
    var yOffset = 30; 

    $('#Images a').hover(function(e) 
    { 
     var tooltipName = $(this).attr('rel'); 

     this.t = this.title; 
     this.title = "";  
     var c = (this.t != "") ? "<br/>" + this.t : ""; 

     $("body").append("<p id='tooltip' class='imageToolTip'><img src='" + BASE + "/img/template/Images/tooltip" + tooltipName + ".png' />"+ c +"</p>"); 

     $("#tooltip") 
     .css("top",(e.pageY - xOffset) + "px") 
     .css("left",(e.pageX + yOffset) + "px") 
     .fadeIn("fast");       
    }, 
    function(){ 
     this.title = this.t;  
     $("#tooltip").remove(); 
    }); 

    $('#Images a').mousemove(function(e) 
    { 
     $("#tooltip") 
      .css("top",(e.pageY - xOffset) + "px") 
      .css("left",(e.pageX + yOffset) + "px"); 
    }); 

}; 

CSS 모든 도움을

.imageToolTip {position: absolute; z-index: 9999; margin-left: -120px; margin-top: 27px;} 

많은 감사를 :

나는 예를 가지고있다.

Answer 1

아마도 당신이 공중에 올라 타기를 사용하고 있기 때문일 것입니다. 마우스를 올리면 resizewindow처럼 움직이는 모든 픽셀을 트리거하는 상수 콜백이 생깁니다.

"mouseenter"와 "mouseleave"로 기능을 분리하는 것이 가장 좋을 것입니다. 또한 콜백을 사용하는 방법이 오래되었습니다. 새로운 방법 (매우 편리함)은 사용하는 것입니다. $('#id').on("mouseenter", function(){});

mousemove 트리거도주의해서 사용해야합니다. 부울을 마우스 포인트와 결합하고 함수를 떠나는 것이 현명 할 수 있습니다.
처음 var entered = false;
만들기 1 : 단계에서 아이디어를

은 지금 당신이 이런 짓을했는지 : 당신이 원하는 무엇이든 수행하고 "entered = true;"
3 말 : 마우스가 영역
2를 입력 if(!entered){//do your thing}
4 : 이제는 사람이 아직 오프셋 내에 있는지 계산해야합니다 (또는 마우스 이동 또는 마우스 이동 또는 무언가를 일으킬 함수). 그렇지 않은 경우 : entered = false;

지역을 벗어 났기 때문에 if(!entered) 문에 입력 한 효과가 다시 트리거 될 수 있지만 이번에는 한 번만 트리거됩니다.