깜박임 드롭 다운 메뉴

자바 스크립트로 메뉴에 애니메이션을 적용하려고하는데 이해가 잘 안되는 이상한 동작이 발생합니다. 테스트 코드는 jsfiddle입니다. 테스트 라벨에 마우스를 올리면 하위 메뉴 (네이비 있음)가 나타납니다. 하위 메뉴에 마우스를 올려 놓으면 이 빠르게으로 돌아갑니다. 하위 메뉴는 영원히 깜박입니다. 나는 문제가 애니메이션의 끝 부분에 제대로 처리되지 않는 것 같아요,하지만 내가 틀린 곳을 잘 이해하지 못합니다.깜박임 드롭 다운 메뉴

<ul id="menu"> 
    <li> 
     Test 
     <section class="sub">Test</section> 
    </li> 
</ul> 


.sub { 
    display: none; 
    width: 100px; 
    height: 100px; 
    background-color: navy; 
    color: white; 
} 

$('#menu li').hover(function() { 
    $('#menu .sub').finish(); 
    $(this).find('.sub').slideDown(400); 
}, 
function() { 
    $('#menu .sub').finish(); 
    $(this).find('.sub').slideUp(400); 
});

출처

2014-05-19 Anonymous

편집 :

이 시도 ...

$('#menu li').hover(function() { 
    $(this).find(".sub").stop(); 
    $(this).find('.sub').slideDown(400); 
}, 
function() { 
    $(this).find(".sub").stop(); 
    $(this).find('.sub').slideUp(400); 
});

출처

2014-05-19 06:33:15 next2u

이 작동하지 않는, 하위 메뉴가 완전히 밀어하지 않을 것 :

점으로, 당신은 하나의

편집 여전히 존재하면서 새로운 애니메이션을 방지하기 위해 if($('.sub', this).is(':animated')) return; 같은 것을 사용할 수 있습니다 메뉴를 바꿀 때. –

@Geeo plz 내 편집 된 코드보기 – next2u

.finish() 방법은 애니메이션이있는 경우는 inmediately 완료 (및 대기열을 제거)해야한다는 것을 의미한다. .stop() 방법을 사용하는 것이 좋습니다. 여러 메뉴 항목이있을 때 you fiddle modified이

출처

2014-05-19 06:38:49 kosmos

깜박임 드롭 다운 메뉴

답변

관련 문제