Why can't my jQuery transitions be seen during form submission?

I want to create a transition indicating form submission is in progress when user click the submit button. I have the following codes.

 $('div').on('submit', 'form', function(e){

     if (transition_done === true) {
        transition_done = false; // reset flag
        return; // let the event bubble away
    }

     e.preventDefault();              

     $('.button').hide();
     $('.transition').show();

    transition_done = true; // set flag 
    this.submit();        

 });

The effect is doing OK on web. But when browse on mobile using the Android browser, the effect doesn't show up. INstead, it submits the form directly. Why is it like that and how can I fix it? Thanks!