Question

I have an issue with my jQuery code. There is a popup panel that I have in my site that contains a form. When I click Submit on my form, my data is submitted to my email and database (as requested). However, once this has been submitted, I want:

1. My form <div> to hide.
2. My confirmation <div> to show.
3. A 2 second delay to take place.
4. My entire form panel to fade out.
5. My confirmation <div> and my form <div> to restore to normal (including resetting the form, which I am not sure how to do, so any help on that front would also be grateful)

Note: I want 5. to take place so that a second email can be sent if needed. I can live without that, but at least up to 4. would be needed.

When I submit my form, my data is processed as desired, but my panel is hidden as a whole, with no <div> transitions taking place, so I do not see my confirmation message. My code is currently set as:

$.post('/includes/hireme.php', $("#formHireMe").serialize(), function(data) {
  $('div#hiremeFormPane').hide();
  $('div#hiremeSubmittedPane').show().delay(5000).hide();
  $('div#hiremeFormPane').show();
  $('div#hiremePanel').fadeOut(150);
});

Does anyone know a) why? or b) if there is a better way of achieving that effect?

Answer 1

show and hide are not animations when they are not given a duration. delay affects the animation queue. Since show and hide are not being place on the animation queue, delay is not delaying the hide, causing it to immediately hide.

You can either give hide a duration (even 1 will do making it nearly instant, but placing it on the animation queue to now be affected by delay) or you will need to use setTimeout or some other animation like fadeOut.