Have one event happen after another one finishes?

Question

I'm trying to create a sequence of events as described below:

1) The user would click on .post-link which would scroll the page to the top if it isn't there already.

2) The #project-container would open up revealing the #loading-animation .

3) The post would load via Ajax.

---

Right now, when I click on .post-link , everything seems to happen at once. How can I format the code below to make sure that one event happens after another one finishes?

Essentially, this is what I'm trying to recreate . When you click on a post, notice how the hidden container opens up to reveal the loading animation, and then once the content has loaded, it opens up to display the content.

JS

$('.post-link').click(function(e) {

    e.preventDefault();

    $('html, body').animate({
        scrollTop : 0
    },500, function() {
        $('#loading-animation').show();
    });

    var post_id = $(this).attr('rel');
    var ajaxURL = site.ajaxurl;

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-container').html(response);
            $('#loading-animation').hide();
        return false;
        }
    });

});

HTML

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <div id="project-container">
            <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif" style="display:none">
        </div>

        <!-- Start the loop -->
        <?php $home_query = new WP_Query('post_type=projects');

        while($home_query->have_posts()) : $home_query->the_post(); ?>

            <a class="post-link" href="#" rel="<?php the_ID(); ?>">
                <article id="post-<?php the_ID(); ?>">
                    <div class="post-info">
                        <h1 class="entry-title"><?php the_title(); ?></h1>
                    </div>
                    <?php the_post_thumbnail( "home-thumb", array( 'class' => 'grayscale grayscale-fade') ); ?>
                </article><!-- #post-## -->
            </a>

        <?php endwhile; ?>
        <?php wp_reset_postdata(); // reset the query ?>

    </main><!-- #main -->
</div><!-- #primary -->

PHP

/**
 * Enqueue scripts and styles.
 */
function starter_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', includes_url( '/js/jquery/jquery.js' ), false, NULL, true );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-effects-core');

    wp_enqueue_style( 'starter-style', get_stylesheet_uri() );
    wp_enqueue_script( 'gray', get_template_directory_uri() . '/js/min/jquery.gray.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'includes', get_template_directory_uri() . '/js/min/includes.min.js', array('jquery'), '', true );
    wp_localize_script( 'includes', 'site', array(
                'theme_path' => get_template_directory_uri(),
                'ajaxurl'    => admin_url('admin-ajax.php')
            )
    );
}
add_action( 'wp_enqueue_scripts', 'starter_scripts' );

/**
 * Return the post content to the AJAX call
 */
function my_load_ajax_content () {
    $args = array(
        'p' => $_POST['post_id'], 
        'post_type' => 'projects' 
        );
    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div class="post-container">

        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

        <?php the_content(); ?>

    </div><!-- #post-## -->

    <?php       
    endwhile;           
    exit;
}
add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

Answer 1

After loading the first post, your #loading-animation is being removed and you cannot interact with it anymore.

Try to load your ajax content into another wrapper element within the #project-container

HTML

   <div id="project-container">
     <img id="loading-animation" src="http://i.imgur.com/5RMfW8P.gif" style="display:none">
     <div class="ajax-wrapper"></div>
   </div>

JS

      [...]
      success: function(response) {
         $('#project-container .ajax-wrapper').html(response);
         $('#loading-animation').hide();
         return false;
      }
      [...]

Answer 2

You have to put your Ajax call into the .show() function for chaining animations.

http://api.jquery.com/show/

$('.post-link').click(function(e) {

    e.preventDefault();
    var post_id = $(this).attr('rel');
    var ajaxURL = site.ajaxurl;

    $('html, body').animate({
        scrollTop : 0
    },500, function() {
        $('#loading-animation').show(500, function() {
            $.ajax({
                type: 'POST',
                url: ajaxURL,
                data: {'action': 'load-content', post_id: post_id },
                success: function(response) {
                    $('#project-container').html(response);
                    $('#loading-animation').hide();
                    return false;
                }
            });
        });
    });
});