jQuery를 애니메이션 성능 모바일 사파리

내가 최근 jQTouch를 사용하여 아이폰 사이트 개발을 시작, 다음과 같은 코드가했습니다jQuery를 애니메이션 성능 모바일 사파리

<li class="title" onclick="showDesc('desc1');">Post Title</li> 
    <li id="desc1" class="shortDesc"> 
     Short description of post content 
     <a href="#viewPost">Read</a> 
    </li> 

<script type="text/css> 
function showDesc(id){ 
    $("#"+id).slideToggle(); 
} 
</script>

"desc1"이 CSS에 숨겨진 및 표시되는 사용자가 클릭을 게시물 제목 (그냥 mockup 작업 중이므로 showDesc()에 전달 된 인수가 현재 하드 코드 됨)

내 문제는 iPhone 자체에서 볼 때 애니메이션이 매우 느리고 더럽다는 것입니다. . 데스크톱 브라우저 (분명히!)와 iPhone 시뮬레이터에서 잘 돌아가며, 그것은 기기 자체 (iOS 4.3.2 실행)에 있습니다.

제 질문은 이것입니다 : 내 코드에 문제가 있습니까? 아니면 jQuery가 모바일 사파리에 최적화되지 않았습니까?

모바일 프레임 워크에 jQTouch를 사용하고 있지만 설명서에서는 애니메이션을 통해 페이지 전환에 대해서만 설명하므로이 작업을 수행하는 방법이 있는지 확실하지 않습니다.

또는이 작업이 CSS3 애니메이션에 더 적합할까요?

미리 감사드립니다.

출처

2011-10-25 fin

예, CSS3 전환을 사용하는 것이 좋습니다. Javascript 애니메이션은 그렇지 않지만 하드웨어 가속입니다. slideToggle 애니메이션의 불투명도 및 너비/높이 매개 변수를 전환하려고합니다. 더럽지 만 훌륭한 성능을 제공합니다.

출처

2011-10-25 21:23:15 nambrot

"CSS 렌더링 엔진"에 성능을 최적화 할 수있는 기회가 있으므로 모바일에서 CSS3 애니메이션을 사용해야합니다. 특히 전이 변환 (텍스처의 재 레이아웃 및 재 렌더링을 일으키지 않는 것)과 같은 것들은 하드웨어에 잘 매핑됩니다.

출처

2011-10-26 00:19:59

그것은 밝혀 그 CSS3 훨씬 더 "기본"옵션이지만 자체가 숨겨진 < 리 >

에 적용되는 웹킷 박스 그림자 속성에 의해 발생 된 휴대 전화에서 렌더링 문제를 많이 이 작업을 위해 jQuery slideToggle() 함수가 완벽하게 작동하는 것처럼 보입니다.

저는 CSS에 대한보다 자세한 개요를 제공해야하지만 지금은 권장 사항에 따라 CSS3 애니메이션에 대해 더 많이 배웠습니다. 그래서 가치가있었습니다!

출처

2011-10-26 16:25:15 fin

jQuery를 애니메이션 성능 모바일 사파리

답변

관련 문제