一个事件在另一个事件完成之后发生吗？

Question

我正在尝试创建一系列事件，如下所述：

1）用户单击.post-link ，如果该页面尚不存在，则会将页面滚动到顶部。

2） #project-container将打开，显示#loading-animation 。

3）该帖子将通过Ajax加载。

---

现在，当我单击.post-link ，似乎一切都立即发生。 如何格式化以下代码，以确保一个事件在另一个事件完成之后发生？

本质上， 这就是我要重新创建的内容 。 当您单击帖子时，请注意隐藏的容器如何打开以显示正在加载的动画，然后在加载内容后打开它以显示内容。

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

加载第一篇文章后，您的＃loading-animation文件将被删除，您将无法再与之互动。

尝试将ajax内容加载到＃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

您必须将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;
                }
            });
        });
    });
});