Произошло ли одно событие после завершения другого?

Question

Я пытаюсь создать последовательность событий, как описано ниже:

1) Пользователь должен нажать на .post-link, который будет прокручивать страницу к вершине, если она не существует уже.

2) Открыт #project-container, показывая #loading-animation.

3) Сообщение будет загружено через Ajax.

---

Прямо сейчас, когда я нажимаю на .post-link, кажется, что все произойдет сразу. Как я могу отформатировать код ниже, чтобы убедиться, что одно событие происходит после завершения другого?

По существу, this is what I'm trying to recreate. Когда вы нажимаете на сообщение, обратите внимание, как открывается скрытый контейнер, чтобы показать загружаемую анимацию, а затем, как только содержимое загрузилось, оно открывается для отображения содержимого.

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

Вы должны поместить ваш Ajax позвонить в .Show() весело для анимации цепочек.

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; 
       } 
      }); 
     }); 
    }); 
}); 

Answer 2

После загрузки первого поста, ваша # погрузо-анимация удаляется, и вы не можете взаимодействовать с ним больше.

Попробуйте загрузить содержимое АЯКС в другой обертке элемента в пределах # проекта-контейнера

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; 
     } 
     [...]