jQuery hide() 후 div가 한 번 깜박임

Question

현재 작은 탐색 메뉴를 만들고 있습니다. 이러한 드롭 다운 메뉴 중 하나에서 확장 할 카테고리가 필요합니다. 그것은 작동합니다. 그러나 카테고리가 jQuery .hide ('slow')를 사용하여 취소하면 숨기기를 원하는 메뉴가 숨기기 애니메이션의 끝에서 한 번 깜박입니다. 그런 다음 제대로 숨겨집니다. 여기

내 문제를 설명하기 위해 몇 가지 코드 아래에있다 : - 힌트 힌트 바이올린 힌트 힌트 :)를 만들 - 당신의 HTML을 보지 않고

$(document).ready(function(){ 

    var verif = false; 

     $("a").hover(function() { 

     var texte = $(this).text(); 
     var tab = new Array; 
     tab = texte.split("      "); 
      if (tab[0] === "+ Deroule" && verif === false) { 
        $("#submenu").show("slow"); 
        verif = true; 
      } 
      else if (tab[0] === "+ Deroule" && verif === true) { 
         $("#submenu").hide(8000); 

//There, I can clearly see, at the end of the hide animation, the previously opened content blinking once before it hides completely. 

                verif = false; 
       }            
     }); 
}); 

Answer 1

을/CSS는 실제로 문제를 핀 어렵지만 내가 먼저 할 일은 .hover() 메소드를 .mouseenter()과 .mouseleave()으로 변경하는 것입니다 (.mousein() 및 .mouseout()이 아닙니다. IE 지원에 대한 또 다른 대화입니다. jQuery의 사이트에서이를 볼 수 있습니다.) 친숙하지 않은).

왜 이런가요? .hover() 메서드는 실제로는 .mouseenter()/.mouseleave()의 줄임말이지만 여러 가지 이유로 (두 가지 전체 메서드만큼 광범위하게 지원되지 않는다는 사실을 포함하여) 때때로 제대로 작동하지 않습니다. 이 문제가이 상황에서 발생한다고 보장 할 수는 없지만, 특히 브라우저 문제로 보일 수 있으므로 가능한 한 많은 지원을 기본으로 사용하는 것이 가장 좋습니다.

는 편집 :

당신의 단순화 된 바이올린을 본 후, 나는 더 나은 문제가 무엇인지 이해하고 무엇을 당신이하려고하는 것 같아요. 이전에 같은 문제가 있었으며 경험상 사실상 설명하기가 어렵다는 점을 말씀 드릴 수 있습니다.

.show(), .hide(), 슬라이드 및 페이드 방법을 사용하여 요소가 표시/숨길 때 애니메이션이 완료되면 즉시 흐름에서 제거됩니다 (대부분의 브라우저에서 - 크롬이 아닌 - show/hide 메서드는 요소가 아무 것도 할 수 없도록 축소시키지 않도록합니다. 따라서 여전히 고르지 않습니다.) 이 문제에 대한 가장 최근의 두 가지 해결책은 다음과 같습니다.

하나의 상황에서 한 번에 하나씩 요소가 잘 보이거나 사라지게 만드는보기 및보기없는 단추를 만드는 것이 좋습니다. 표시 할 컬렉션의 표시/숨기기, 슬라이드 또는 페이드 메서드를 호출하려고하면 모두 동시에 애니메이션이 적용되며 콜백으로 실행하려고 할 때도 마찬가지입니다. 또한 슬라이딩 메서드는이 애니메이션이 한 번에 여러 항목에서 호출되어 오버 헤드가 많이 발생하고 느린 브라우저에서 (그리고 FF에서도 조금씩) 효과가 끊어지기 때문에 작동하지 않습니다. 일부 브라우저에서는 show/hide 메서드가 실제로 요소의 크기를 줄이기 때문에 효과적 이었지만 다른 브라우저에서는 보이지 않게되었습니다 (실제로 모든 브라우저에서 해당 애니메이션이 "완료"되지 않습니다 - 위 참조). 따라서 세 가지 옵션, 즉 페이드, 애니메이션 또는 둘의 조합을 사용했습니다.

용액 1 :이 시점에서 가장 용액 (지정된 사양과)되면서 단순히 hidden에 래퍼 div (overflow 집합을 슬라이드로 애니메이션 방법을 사용 하였다 원안 또는 아래로, 목록에서 대상 요소의 오프셋을 기준으로). 이것은 훌륭하게 작동했지만, 각 요소가 페이드 효과를 통해 연속적으로 사라지도록 요구되었습니다.이 방법을 선택하면 슬라이드 방법을 사용하는 것이 좋습니다. 더 많거나 적은 링크를 표시하려고 시도하지 않으므로 문제가되지 않아야합니다 (예, 나는 소리가 나지 않습니다. 그것은 더 많거나 적은 링크를 볼 때 문제가 될 것입니다. 그러나 그것을 구현해야만했던 방식으로 슬라이드가 실제로 문제를 일으켰습니다).

해결 방법 2 : 모든 것이 여전히이 페이드가 완료되면 애니메이션이 여전히 뛰어 내리고 싶다하지 않은 경우에도, 같은 시간에 퇴색 예정하고 있었기 때문에 자체에 페이드를 사용하여이 문제였다. 따라서 해결해야 할 첫 번째 문제는 동시에 실행되는 애니메이션이었습니다. 오버 헤드 때문에 타이머를 사용하는 것이 문제가 아니었기 때문에 호출간에 필요한 지연을 계산 한 후 콜렉션의 각 요소에 대해 재귀 적으로 호출하는 함수를 작성했습니다 (제공된 속도 인수와 요소의 수를 기반으로 퇴색한다). 다음으로 애니메이션이 완성되면 점프 문제를 해결해야했습니다. 이 문제를 해결하기 위해 .fadeTo() 메서드를 구현하여 애니메이션 이후에 문서 흐름에 요소를 유지했습니다. 이것은, 그러나, 두 개 더 문제가 발생할 않았다 다음 .fadeTo() 방법은 IE에서 지원되지 않습니다

1. 이 (가 9 및 10에있을 수 있습니다 - 내가 기억할 수없는) 애니메이션 후
2. 을 많이가 있었다 빈 공간으로 인해

첫 번째 문제를 해결하기 위해 흐름으로부터 제거되는 요소가 아니라, I는 block 각 요소의 display 속성을 설정하고 자신 visibility-hidden IE위한 브라우저 구체적인 방법을 첨가 일단 그들의 fade-outs가 완료되면 - 그것은 또한 역주를했다 st가 그들의 퇴색하기 시작되기 전에 시작되었다.

이전에 설명한 애니메이션 방법을 사용하여 두 번째 문제를 해결했습니다. 이 작업을 수행하기 위해 컨테이너의 슬라이드 속도, 애니메이션의 속도 및 표시/숨김 요소의 수를 기반으로 다른 속도를 계산하는 보조 방법을 작성해야했습니다.

나는이 많은 세부 것을 알고,하지만 난 당신이 이것에 대해 이동하는 최선의 방법을 결정하는 데 도움이되기를 바랍니다.

구현과 함께 나아갈 때 질문이 있거나 설명이 필요한 경우 알려주십시오. 행운을 빕니다! :)