2012-12-14 2 views
1

저는 모바일 프레임 워크가 작고 iPhone의 fadeIn() 또는 fadeOut()과 같은 jQuery 애니메이션 메서드에 타이밍 문제가 있습니다. 데스크탑 컴퓨터에서는 완벽하게 작동합니다! 문제는 아이폰 브라우저가 콜백 시간을 대부분 무시하고 애니메이션이 끝나기 전에 함수를 시작한다는 것입니다. 여기iphone5에서 jQuery 콜백 타임밍

내 코드

function show_edit_product_page(curr_key){ 
    $('#pageid_10001').remove(); 
    console.log('removed...') 
    $.ajax({ 
     url  : '../scripts/webservice.php', 
     dataType: 'html', 
     type : 'GET', 
     data : 'type=my_type_data&key='+curr_key, 
     success: function(data) { 
      $('#all_pages').append(data); 
      $('#page_content .page').not('#pageid_10001').fadeOut(350,function() { 
       $('#pageid_10001').fadeIn(350, function(){ 
        myScrol2.refresh(); 
       }); 
      }); 
     } 
    }); 
} 

'데이터'는 mainwrapper (#의 pageid_10001)를 포함하고이 숨겨져 있습니다. 다른 페이지에서 페이드 아웃이 끝나면 페이드 인해야합니다.

모든 아이디어, 어떻게 동작을 최적화 할 수 있습니다.

답변

1

불행히도 JavaScript 기반 애니메이션은 iPhone의 Safari가 모든 것을 잘 처리하는 것이 아닙니다. 이 경우 애니메이션 기능 자체가 성공적으로 완료되고 실제 "표시된"애니메이션은 시각적으로 중단됩니다.

당신이 찾고있는 인/아웃에서 나는 좋은 부드러운 페이드를 얻기 위해 사파리에 내장 된 CSS3 전환 효과를 사용하는 것이 좋습니다 : https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction.html

당신이 당신의 처리에 일관성있는 애니메이션이 있으면, 타이밍을 동기화 (귀하의 경우에는 애니메이션 완료시 함수 호출)은 매우 사소한 것이어야합니다.