Question

I m working on a small mobile framework and have a timing problem with jQuery animation methods like fadeIn() or fadeOut() on iPhone. On Desktop-machines it works perfect!
The problem is, that the iphone browser ignores most times the callback-time, and starts the function before the animation ends.

Here my code

    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’ contains a mainwrapper(#pageid_10001) and this is hidden. It should only fadeIn, when the other pages finishs fading out.

Any ideas, how i can optimize the behavior.

Answer 1

Unfortunately JavaScript-based animations are not something that Safari on the iPhone handles all that well. In this case, it’s likely that the animate function itself completes successfully, while the actual “displayed” animation is getting visually hung up.

I would recommend using the CSS3 transition effects built into Safari to get a nice smooth fade in/out you’re looking for: https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Introduction.html

Once you have consistent animations at your disposal, synchronizing the timing (in your case, calling a function on the animations completion) should be fairly trivial.