2010-02-03 4 views
2

수천 개의 레코드 (div 요소)가있는 테이블이 있습니다. 각 div는 클릭 할 수 있으며 각 레코드를 클릭하면 클릭 한 div 아래 숨겨진 div가 slideToggle을 사용하여 표시됩니다. 레코드 수 있기 때문에 jQuery에서 slideToggle 문제

는 slideToggle 효과 원하는 아니다 매우 높다. 슬라이딩 대신 div를 보여줍니다.

나는 다음과 같은 이벤트 핸들러 코드 나 페이지에 이러한 레코드를 분할하지 않으

$("div.opendiv").click(function(){ 
    var openelem = $(this).next(); 
    openelem.slideToggle();  
}); 

에게 있습니다.

아무것도 내가 slideToggle 효과가 원활하게 될 수 있도록 할 수 있습니까?

감사

+0

저는 낙관적이지 않습니다. 비슷한 문제가 있습니다. 브라우저에서 모든 위치를 재조정해야합니다. 그것은 매우 느렸다. Chrome이 더 잘됩니까? – Kobi

답변

1

당신은 slideToggle의 efect에도를 해제 할 수있는 기간을 설정 봤어? 좋아 :

$("div.opendiv").click(function(){ 
    var openelem = $(this).next(); 
    openelem.slideToggle(1000);  
}); 
+0

여전히 효과가 부드럽지 않습니다. – rahul

+1

'slideToggle()'은 기본 시간을가집니다. – Kobi

+0

기본 시간이 있다는 것을 알고 있습니다. 내 생각에 잠김은 div 안에 너무 많은 html이있는 경우, smothly로 여는 데 더 많은 시간이 필요할 수 있습니다. 조금 더 늘리려고 시도하십시오. – TeKapa

3

당신이 수천 사이에 하나 개의 요소를 전환되기 때문에, 모든 브라우저가을 할 수있는 지연을 보여줍니다. 다른 것들보다 약간 더. 이것은 브라우저와 버전에 의한 메모리 사용과 관련이 있지만 사용자 컴퓨터에도 해당됩니다. 분명히, 더 나은 기계는 더 많은 DOM 요소를 잘 조작 할 수 있습니다.

그래서, 난 당신을 돕기 위해 하나의 해결 방법으로 바이올린을 만들어 : http://jsfiddle.net/9vMEV/6/.

아이디어는 다음 상위 크기가 고정되어있는 경우가 애니메이션되는 유일한 요소 되기 때문에, 아이 슬라이딩 애니메이션, 질식한다. 그래서 부모 코드 height을 설정하기 전에 코드를 업데이트하여 자식을 슬라이드하기 시작했습니다 div.

브라우저보다 애니메이션 수없는 순간이있을 것이다 ... (500) 1000, 10000, 50000에 for 제한을 변경

. 그리고 어쩌면 내 테스트에서

가, 애니메이션도 약 30,000 td 요소와 부드러운 좋은 ... 모든 페이지를 표시하기 전에 충돌합니다. 그래서이 아이디어는 어떤 경우에 당신의 문제를 해결할 것입니다.

는하지만 실제로 당신이 많은 페이지에이 큰 페이지를 분할하지 않으려면 더 나은 옵션이 생각 :보기와 그 안에 TDS의 몇 백을 숨기고 탭, 같은 일부 div의와 작동합니다. 에 거의 인 부모의 모든 어린이는 display: none으로 처리되지 않으며 지연이 발생하지 않습니다.