how to show an element, do something else and then

Question

I'm using contact form 7. I have a form submit button, when i click it gif loader image shows up and then validation status message shows up along with gif image disappear.

in css i'm using .ajax-loader{display:none;}

in js i'm using

$('.wpcf7-submit').click(function(){
  $('.ajax-loader').show();

if('block' ==  $('div.wpcf7-display-none').css('display')){
         $('.ajax-loader').hide();
   }  
});

But this code is not working as alerting $('div.wpcf7-display-none').css('display') is still showing "none", instead of "block". Basically i'm trying to overwrite a plugin's code , instead of modifying them directly.

How do i hide back the gif image?

here is the form markup

<form>
//markup for different fields

//and here are the three main elements after clicking the submit button

<p>
<input type="submit" value="Make an appointment now" class="wpcf7-form-control wpcf7-submit btn btn-block btn-default">
<img class="ajax-loader" src="http://localhost/medical/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="display: inline-block; visibility: hidden;">
</p>

<div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert">
Validation errors occurred. Please confirm the fields and submit it again.
</div>
</form>

Answer 1

You can nest the functions in the callbacks of the previous function -

$('.wpcf7-submit').click(function(){
  $('.ajax-loader').show(function() {
      if('block' ==  $('div.wpcf7-display-none').css('display')){
         $('.ajax-loader').hide();
      }
  });  
});

Of course this is just speculation as we haven't seen your markup. What changes the display of div.wpcf7-display-none?