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

加载第一篇文章后，您的#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;
                }
            });
        });
    });
});

另一个事件结束后会发生一个事件吗？

2 个答案: