jQuery와 관련된 애니메이션 문제

Question

Fiddle. (또한 바이올린에 주석)

관련 코드 : 바이올린에서

// tooltip positioning on hover and overlay fade on all li's except for submenu items that are not the last child 
$("ul:not(.sub-menu) > li, ul.sub-menu > li:last-child").not(":has(ul.sub-menu)").hover(function() { 
    var $this = $(this), 
    title = $(this).children("a").data("title"), 
    posL = $this.offset().left + ($this.width()/2), 
    posT = $this.height(), 
    tooltip = $("#tooltip"), 
    overlay = $("#overlay"); 

    $this.addClass("over-down"); 
    overlay.stop(true).fadeIn("slow"); // RELEVANT FOR QUESTION 
    tooltip.stop(true, true).text(title).animate({ // RELEVANT FOR QUESTION 
    "left": posL - (tooltip.width()/2), 
     "top": posT + $this.offset().top + 20 
    }, 300).fadeIn("fast"); 
}, function() { 
    var $this = $(this), 
    tooltip = $("#tooltip"), 
    overlay = $("#overlay"); 

    $this.removeClass("over-down"); 
    overlay.stop(true).fadeOut("slow"); // RELEVANT FOR QUESTION 
    tooltip.stop(true).fadeOut(400); // RELEVANT FOR QUESTION 
}); 

는 간단히를 떠나 다른 항목을 유혹 한 후, 항목 위에 마우스를보십시오. 범위와 마찬가지로 #overlay div가 부분적으로 흐려져 있음을 알 수 있습니다. 내가 원한 것은이 둘 사이의 부드러운 전이입니다. 따라서 일반적으로 툴팁과 오버레이는 100 %로 다시 fadeIn해야하지만 그렇지 않습니다. 나는 그와 함께 어지럽히고있다 .stop() 그러나 아무것도 일하는 것처럼 보인다.

이 문제는 테스트 된 모든 브라우저 (IE10, FF, Chrome)에서 발생합니다.

Answer 1

fadeOut 중간에 .stop(true)이있는 경우 항목은 display:none으로 설정되지 않으므로 다음 fadeIn은 적용되지 않습니다. 소자의 급격한 display:none 강제 따라서 연속적으로 fadeIn 활성화 될 fadeIn 전에 .stop(true, true) 사용

:

2 개 가능한 솔루션이있다. 이것은 아주 매끄러운 해결책이 아닙니다. Fiddle

다른 해결책은 fadeIn 대신 fadeTo을 사용하는 것입니다. fadeTo은 fadeIn과 비슷한 불투명도를 애니메이션화하지만 display:none 요구 사항을 적용하지 않습니다. 또한 fadeIn로를 않습니다 페이드 숨겨진 요소에서 작동 :

$this.addClass("over-down"); 
overlay.stop(true).fadeTo(600, .75); //edited here 
tooltip.stop(true, true).text(title).animate({ //here* 
    "left": posL - (tooltip.width()/2), 
    "top": posT + $this.offset().top + 20 
}, 300).fadeTo(200, 1); //and here 

Fiddle

이 더 원활하게 해결하는 방법입니다. 현재 불투명도 또는 표시와 독립적으로 요소를 적절하게 .75 불투명도로 다시 애니메이션합니다.

* fadeTo이 대기중인 동안 반쯤 희미 해지지 않도록 툴팁에 .stop(true, true)을 추가했습니다. 당신이 그와 같은 슬라이드하려면, 시도 :

var do_dequeue = tooltip.is(':visible'); 
tooltip.stop(true).text(title).animate({ // RELEVANT FOR QUESTION 
    "left": posL - (tooltip.width()/2), 
    "top": posT + $this.offset().top + 20, 
}, 300).fadeTo(200, 1); 
if (do_dequeue) tooltip.dequeue(); 

Fiddle

do_dequeue var에 툴팁이 부분적 원이 부분적으로 후, 페이드 인 경우, 큐 퇴색 이동을 준비하기 전에 퇴색되었는지 여부를 추적 전체 불투명도로 되돌아 가기 전에 요소 아래에 툴팁이 나타날 때까지 기다리지 마십시오. 나는 이것이 얻을 수있는 매끄러운 것 같아요. =]