Php 加载gif的Ajax Wordpress分页

我一直在使用这个解决方案：

$(document).ready(function(){
        jQuery(function($) {
            $('.recipe-results').on('click', '#pagination a', function(e){
                e.preventDefault();
                var link = $(this).attr('href');
                $('.recipe-results').animate({opacity:0.1}, 200, function(){
                    $(this).load(link + ' .recipe-results', function() {
                        $(this).animate({opacity: 1},200);
                    });
                });
            });
        });
    });

从这里

我希望能够在淡出和淡入时间之间添加加载gif。我的HTML代码是这样的

  <div class="recipe-results">

  <?php if (have_posts()) : $count=1; ?>
    <div class="clearfix">
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

    <?php $count++; endwhile;?>
    </div>
    <?php endif; ?>

    <div id="pagination" class="clearfix">
          <!-- pagination stuff here -->
    </div> <!-- close pagination -->

    </div> <!-- close recipe-results -->

我尝试过各种解决方案，但我对使用jQuery的AJAX非常熟悉，因此无法找到有效的解决方案

提前感谢。

在您的HTML中：

<div id="loading" style="display:none;"> 
  <img src="images/loading.gif" title="loading" />
</div>


$(document).ready(function(){
        jQuery(function($) {
            $('.recipe-results').on('click', '#pagination a', function(e){
               $('#loading').show();
                e.preventDefault();
                var link = $(this).attr('href');
                $('.recipe-results').animate({opacity:0.1}, 200, function(){
                    $(this).load(link + ' .recipe-results', function() {
                     $('#loading').hide();
                        $(this).animate({opacity: 1},200);
                    });
                });
            });
        });
    });

$（文档）.ready（函数（）{
jQuery（函数（$）{
$（'.recipe results'）。在（'单击'，'分页a'，函数（e）{
$（“#加载”）.show（）；
e、 预防默认值（）；
var link=$（this.attr（'href'）；
$（'.recipe results'）.animate（{opacity:0.1}，200，function（）{
$（this）.load（link+'.recipe results'，函数（）{
$（“#加载”）.hide（）；
设置动画（{opacity:1}，200）；
});
});
});
});
});

---

默认情况下，

loading

div被设置为display none，并在Ajax请求触发时显示。

很好，这起了作用，产生了另一个问题，它只在第一次加载时触发，但我将尝试解决这个问题。