1

我正在开发一个小型移动框架，并且在 iPhone 上使用 jQuery 动画方法（如 fadeIn() 或 fadeOut()）时遇到了计时问题。在台式机上，它完美无缺！问题是，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();
                }); 
            });
        }
    });
}

'data' 包含一个 mainwrapper(#pageid_10001)，这是隐藏的。当其他页面完成淡出时，它应该只淡入。

任何想法，我如何优化行为。

4

1 回答 1

1

不幸的是，基于 JavaScript 的动画并不是 iPhone 上的 Safari 处理得那么好。在这种情况下，动画功能本身很可能成功完成，而实际“显示”的动画在视觉上被挂起。

我建议使用Safari 中内置的CSS3 过渡效果来获得您正在寻找的平滑淡入/淡出： https ://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction .html

一旦您可以使用一致的动画，同步时间（在您的情况下，在动画完成时调用一个函数）应该是相当微不足道的。

于 2012-12-14T01:39:50.763 回答