Question

I am learning jQuery and I have written a very simple script that works great. Now I would like to find out if there is a better way to write this line.

$("form").submit(function() {
    $('div.beforeRecover').animate({ opacity: 'toggle' }, 300).delay(800);
    $('div.betweenRecover').animate({ opacity: 'toggle' }, 200).delay(1200);
    $('div.betweenRecover').animate({ opacity: 'toggle' }, 800);
    $('div.afterRecover').delay(1800).animate({ opacity: 'toggle' }, 1400);
    return false;
});

To briefly explain:

1. Form gets submitted
2. Form fades
3. Loading gif appears
4. Loading gif fades
5. Confirmation message appears.

I appreciate any help!

Answer 1

var fadeToggle = { opacity: 'toggle' };

$("form").submit(function() {

    $('div.beforeRecover').animate(fadeToggle, 300).delay(800);

    $('div.betweenRecover')
        .animate(fadeToggle, 200).delay(1200)
        .animate(fadeToggle, 800).delay(1800);

    $('div.afterRecover').animate(fadeToggle, 1400);

    return false;
});

Infact, there is a whole separate method called .fadeToggle()