2013-05-20 1 views
3

전환하는 동안 하위 메뉴 위로 마우스를 가져 가면 약간의 문제가 발생합니다 ... 정말 깜박 거리고 ... 정말 나빠요. 추가해 보았습니다. 하지만, 도움이되지 않았다 효과가 전환에 동안 자연적으로 많은 사용자가 아래로 가져가됩니다 .... 그래서 희망이를 막을 수있는 방법이, 나는 다음과 같은 ...전환하는 동안 하위 메뉴 위로 마우스를 가져 가면 깜박임

http://jsfiddle.net/awxgY/3/

// menu hover functionality 
$(document).ready(function() { 
    $('nav li,#mini-menu li').hover(
    function() { 
    //show its submenu 
    $('.sub-nav', this).slideDown(400).stop; 
    $('.mini-nav', this).fadeIn(300).stop; 
}, 
function() { 
    //hide its submenu 
    $('.sub-nav,.mini-nav', this).stop(true,true).fadeOut(300);   
} 
);  

// preserves nav hover state 
    $("nav ul li .sub-nav").each(function(i){ 
$(this).hover(function(){ 
    $(this).parent().find("a").slice(0,1).addClass("navactive"); 
},function(){ 
    $(this).parent().find("a").slice(0,1).removeClass("navactive"); 
}); 
}); 
}); 
을 구축했습니다

링크 4 위로 마우스를 가져간 다음 하위 메뉴로 들어가면 내게 무슨 뜻인지 알게 될 것입니다. 이 함수이기 때문에, http://jsfiddle.net/awxgY/6/

는 첫째, .stop()가 paranthesis을 필요로 -

+1

서브 메뉴로 나에게 링크 4에서 –

+0

출근 대각선 아래로 (빨리)을 잘 보이는, 당신은 – Codesworth

+0

너무 나에게 잘 보이는 ... 나쁜 깜박임을 얻을 것이다. Firefox 21.0과 우분투의 Chromium 25.0에서 모두 시도했습니다. – username

답변

3

이 확인을 작동하는 것 같다. 둘째, .stop() 함수는 애니메이션이 시작되기 전에 호출해야합니다. $('.sub-nav', this).stop().slideDown(400); -이 방법으로 문제가 해결되는지 확실하지 않습니다. Im 실제로 표시되지 않습니다. 애니메이션이 끝나면 멈추고 현재 애니메이션을 멈추게합니다. 이것은 원하는 것이 아닙니다.

또한 호버 명령의 "롤오버"를 제거하기 위해 stopPropagation() 호출을 추가했습니다.

+0

가 훨씬 더 좋고, 완벽하지는 않지만, 확실히 향상됩니다. 시간을내어 주셔서 감사합니다. :) – Codesworth

0

메뉴와 하위 메뉴 사이의 공백을 제거하기 만하면됩니다. http://jsfiddle.net/ecTLz/

.sub-nav { display: none; position: absolute; overflow: auto; top: 60px; width: 100%; z-index: 500; left: 0; padding: 2em 0;background:#000} 
관련 문제