iPhone5中的jQuery回調計時

Question

我正在使用一個小型移動框架，並且在iPhone上使用諸如fadeIn（）或fadeOut（）之類的jQuery動畫方法存在計時問題。 在台式機上，它可以完美運行！ 問題在於，iphone瀏覽器大多數時候都會忽略回調時間，並在動畫結束之前啟動該功能。

這是我的代碼

    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();
                }); 
            });
        }
    });
}

“數據”包含一個主包裝器（＃pageid_10001），並且已隱藏。 當其他頁面淡出時，它應該只淡入。

任何想法，我如何可以優化行為。

Answer 1

不幸的是，基於JavaScript的動畫並不是iPhone上的Safari能夠很好地處理的事情。 在這種情況下，動畫功能本身可能會成功完成，而實際的“顯示”動畫會在視覺上掛起。

我建議您使用Safari內置的CSS3過渡效果來獲得想要的平滑淡入/淡出效果 ： https : //developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction .html

一旦可以使用一致的動畫，同步時間（就您的情況而言，在動畫完成時調用一個函數）應該就很簡單了。