2011-03-31 5 views
1

현재 div 내에 요소가 있는지 감지하는 방법이 있습니까?div에 속하는 경우

세로 스크롤 메뉴가 있습니다. 탐색 div의 높이를 설정 한 다음 오버플로 : 숨김으로 설정하여 한 번에 몇 개의 링크 만 보았습니다.

그래서 탐색 아래쪽의 그래픽을 클릭하여 링크를 아래로 이동합니다. 반대의 효과를 얻으려면 맨 위에 다른 그래픽이 있습니다.

그러나 애니메이션을 멈추는 데 안정적인 방법을 찾을 수 없습니다. 따라서 운동은 첫 번째와 마지막 메뉴 링크를 지나가고 있습니다.

당신은 그냥 질문에 대답 http://test2omniforce.co.uk/test

답변

2

버튼을 클릭 할 때 div # content 상단 여백의 현재 값을 테스트해야합니다. 예를 들어, div # content margin-top이 0보다 작 으면 맨 위 버튼의 애니메이션을 재생해야하며 margin-top이 -500보다 클 경우 맨 아래 버튼의 애니메이션을 재생해야합니다.

+0

어떻게 margin-top 요소를 테스트합니까? – sisko

+0

$ ('div # content') .css ('margin-top')는 위쪽 여백을 제공합니다. 이것 좀 봐 : http://jsfiddle.net/yCreg/ – shanethehat

1

에서 문제를 볼 수 있습니다, jQuery를가 검출하는 :hashelp 의사 선택을 제공합니다. 보이는 것

if($('div:has(span)').length) { } // true if a div contains a `<span>` node. 

그러나 이것이 당신 문제라고 생각하지 않습니다. 애니메이션을 안정적으로 정지하려면 .stop()help으로 전화하면됩니다.
아마

$('div').stop(true,true).animate() // ... 

매개 변수는 현재 FX 큐를 지우고 끝으로 이동, jQuery를 말해 좋아합니다.

비동기 효과가있는 다중 실행을 피하는 또 다른 기법은 :animatedhelp 의사 선택기를 호출하는 것입니다. 이를 통해 은 현재 요소가 애니메이션 인 경우을 감지 할 수 있으며, 그렇다면 아무 것도하지 않습니다.

if($('div').is(':animated')) { } // div is currently animated 
+1

OP는 실제로 해당 div의 내용이 뷰포트 (?)에서 벗어나는 지 알아내는 데 문제가 있습니다. 메뉴를 움직이기 전에 메뉴의 상단/하단이 표시되는지 알아 내려고합니다. – JohnP

0

이 밖으로 시도 :

if ($('#myElement').closest('div').length > 0) { 
    // yup, I'm inside a DIV 
} 

당신은 또한 .closest() 함수 내에서 적절한 jQuery를 선택에 연결할 수 있습니다. 따라서 요소가 스크롤 가능한 DIV 안에 있는지 확인할 수 있습니다.

$('#myElement').closest('div#myScrollableDiv').length > 0 
관련 문제