2011-10-21 4 views
2

그래, 모든 종류의 비슷한 질문을 읽었지만 특정 문제에 대한 답변을 찾지 못했습니다. 내 사이트에는 어떤 그림 유형이 있는지 보여주는 이미지가 나타나는 호버 및 div의 확대 이미지 목록이 있습니다. 마우스를 놓으면 div가 사라지고 이미지가 이전 상태로 돌아갑니다. 하나씩 이미지 위에 마우스를 천천히 올려 놓으면 모든 것이 잘 작동하지만 몇 개의 이미지를 상당히 빠르게 움직이면 모든 div가 나타나고 더 이상 이미지가 더 이상 덮이지 않아도 볼 수 있습니다. 그래서 내 질문은 이것입니다 : 이미지를 빠르게 가져가더라도 div를 사라지게하더라도 어떻게 설정합니까?div가 이미지를 가리 키지 않는 경우 숨기기

$("ul.graphThumbs li").hover(function() { 
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700); 
},function(){ 
    $(".graphInfo").hide(); 
}); 

나는 if ("ul.graphThumbs li") 같은이 다음 (".graphInfo").hide() 맴돌고되지해야합니다. 따라서 ("ul.graphThumbs li")의 일부가 선회 될 경우에만 (".graphInfo")이 표시 될 수 있습니다. 희망이 충분히 분명했습니다.

+0

오프 손 나는 당신의 숨기기 선택에 이렇게 모호한되지 않는 것이 좋습니다. 쇼에서처럼 숨기기에서 같은'find()'를 사용해야합니다. –

답변

1
$("ul.graphThumbs li").hover(function() { 
    $('.graphInfo').stop(true); 
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700); 
},function(){ 
    $(".graphInfo").hide(); 
}); 
+0

$ ('. graphInfo'). 정지 (true); 이것은 내 문제를 해결, – misticx

2

빠른 예를 http://jsfiddle.net/lastrose/ssHRd/

당신이 JQuery와에 충실, .stop()와 다른 애니메이션을 시작하기 전에 대기열을 취소하려는 경우와 같은 CSS를 사용

div.about{display:none;} 
img:hover + div.about{display:block;} 

.

$("ul.graphThumbs li").stop(true) 
관련 문제