크로스 브라우저 JQuery 전환 애니메이션?
https://stackoverflow.com/questions/459302
-
19-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
Firefox 3과 IE7 모두에서 작동하는 jQuery 1.3 애니메이션 전환이 있습니까?
여러 테이블 행 (25 개 이상)이있는 테이블이 있으며, 일부 행이 숨겨지기 시작합니다 (이 행은 모두 공통 클래스를 공유합니다.이 예에서는 ".hidden"). 테이블 헤더에는 .click ()을 통해 숨겨진 행을 표시하는 함수로 바인딩 된 "More Show"링크가 있습니다. 그런 다음 "표시"를 "표시"로 변경하고 .click ()를 변경합니다. 반대의 함수.
각 .click () 함수에는 다음과 같은 선이 있습니다.
$(this).parents("tbody").children("tr.hidden").show();
.show ()가 "Show Less"함수의 .hide ()로 대체 된 상태에서.
그러나 .show ()/. hide ()를 .fadein ()/. fadeout ()로 바꾸려고하면 1 분이 걸리는 것을 제외하고는 .show ()/. hide ()와 거의 동일하게 렌더링됩니다. .Hide ()를 적용합니다. 거기에 실제 애니메이션이 없습니다. IE에서 열등하지만, 그것은 훌륭한 Firefox가 작동합니다.
.slidedown ()/. slideup ()를 사용하려고하면 IE에서 유사하게 janky이며, 전환을 완료 한 직후 이상한 펄스 효과를 제외하고 .show ()/. hide ()와 거의 동일합니다. Firefox 3도 그 위에 질식합니다. 테이블 행의 행 너비가 표시되는 것을 잊고 모든 것을 끔찍하게 보이게합니다.
그렇다면 애니메이션은 IE7을 빨아 먹습니까? 이 경우 두 브라우저에서 모두 작동하는 우아하고 부드러운 전환을 가질 수있는 방법이 있습니까?
해결책
에 따르면 jQuery의 호환성 페이지 이런 종류의 것은 버그이며보고해야합니다.
다른 팁
종종 여러 번 동시 애니메이션을 갖는 것은 IE에게는 어려울 수 있습니다. JavaScript 엔진은 Safari 또는 Firefox 또는 Chrome 근처에 있지 않습니다. 이것은 IE6 및 IE7에 적용됩니다. 나는 아직 IE8과 함께 일하지 않았습니다.
조금 도움이 될 수있는 한 가지는 애니메이션을하려는 요소에 정적 높이를 설정하는 것입니다. CSS/레이아웃 관점에서 볼 때 이것은 일반적으로 이상적이지 않지만 ... jQuery는 요소의 높이를 애니메이션하기 전에 각 요소의 높이를 먼저 계산 해야하는 작업을 건너 뛸 수 있습니다.
일반적으로 SLR 카메라와 같은 방식으로 애니메이션에 접근 할 수 있습니다. (여기서 나와 고집). 스포츠 이벤트의 빠른 발사 촬영을 시도하는 경우, 모든 사진 작가는 미리 포커스, ISO 및 셔터 속도를 설정하는 것이 좋습니다. 이런 식으로 카메라는 각 샷 사이 에이 모든 것을 계산할 필요가 없으며 셔터 버튼을 누르고 클릭 클릭 클릭 클릭 클릭을 클릭하면 클릭 할 수 있습니다. A- 팀 스타일.
어쨌든 애니메이션과 관련하여 애니메이션이 발생하기 위해 JavaScript가 계산해야 할 사항을 생각해보십시오. 불투명, 높이, 계산 높이 (요소 폭 + 테두리 + 패딩), 스크린 위치는 모두 시작하기에 좋은 장소입니다.
종종 애니메이션이 시작될 때 jQuery가 DOM에 추가하는 것을 실제로 볼 수 있습니다 (사용 개똥 벌레). 불투명도 애니메이션에서는 스타일 = "불투명도 : 1;"을 볼 수 있습니다. 카운트가 0으로 시작되기 직전에 추가됩니다.
브라우저 전체의 공연에 대해 말할 때 지나치게 명확하지 않을 것입니다. 솔직히 말해서, 나는 WebKit이 울게 만드는 무거운 JS 애니메이션을 보았지만 FF와 IE는 그것을 잘 처리했습니다.
브라우저에는 다른 CS 및 JS 구현이있어서 언젠가는 부진한 성능 뒤의 범인을 손가락으로 가리키기가 어렵다는 점을 고려해야합니다.
IE를 취하십시오. 블록 레벨 요소 4000x4000과 2x2 투명 GIF가 반복되도록 설정된 경우, 신은 금지 할 때마다 요소가 2x2 gif를 다시 그리기하고 각각의 알파를 2000 번 이상 계산합니다. FF는 배경을 캐시하거나 극적으로 다른 REDRAW를 가지고 있습니다. 두 경우 모두 공연이 비교할 수 없습니다. 매뉴얼에서 당신은 당신이 어떻게 그리고 무엇을하는지 조심해야한다고 말하지 않았습니다.
