Javascript&；Wordpress：显示内容时闪烁&；通过过滤器按钮隐藏帖子

我使用页面顶部的一组过滤器按钮来打开和关闭帖子的显示，这取决于它们各自的类别。为此，我使用以下javascript：

<script>
    var $btns = $('.btn').click(function() {

      if (this.id == 'all') {
        $('.projekte > .post').fadeIn(300);
      } else {
        $('.projekte > .post').not($el).fadeOut(300);
        var $el = $('.' + this.id).fadeIn(300);

      }
      $btns.removeClass('active');
      $(this).addClass('active');
    })
</script> 

var$btns=$（'.btn'）。单击（函数（）{
如果（this.id=='all'）{
$（'.projekte>.post'）.fadeIn（300）；
}否则{
$（'.projekte>.post'）。而不是（$el）.fadeOut（300）；
var$el=$（'..+this.id）.fadeIn（300）；
}
$btns.removeClass（'active'）；
$（this.addClass（'active'）；
})

打开和关闭属于相应类别的帖子（点击的按钮绑定到该类别），效果非常好，但不幸的是，在显示新内容和隐藏的帖子消失时，会出现难看的闪烁

有没有办法让我来解决这个问题？例如，先隐藏旧帖子，然后加载新帖子？如何在javascript中实现类似的内容

以下是整个页面的代码（可以在此处访问页面本身：）：

SoSe 2017
WiSe 2016/17
SoSe 2016
WiSe 2015/16
SoSe 2015
WiSe 2014/15
找不到任何文章！
var$btns=$（'.btn'）。单击（函数（）{
如果（this.id=='all'）{
$（'.projekte>.post'）.fadeIn（300）；
}否则{
var$el=$（'..+this.id）.fadeIn（300）；
$（'.projekte>.post'）。而不是（$el）.fadeOut（300）；
}
$btns.removeClass（'active'）；
$（this.addClass（'active'）；
})

<?php get_header(); ?>
</div>
<br>
<div class="wrapper-offset-fix wrapper-studierende">
<div class="projekte content">

    <div class="button-group filters-button-group">
        <button class="projekt-btn btn"         id="category-stud-sose17">      SoSe 2017           </button>
        <button class="projekt-btn btn"         id="category-stud-wise1617">    WiSe 2016/17        </button>
        <button class="projekt-btn btn"         id="category-wise-201415">      SoSe 2016           </button>
        <button class="projekt-btn btn"         id="category-sose-14">          WiSe 2015/16        </button>
        <button class="projekt-btn btn"         id="category-sose-14">          SoSe 2015           </button>
        <button class="projekt-btn btn"         id="category-sose-14">          WiSe 2014/15        </button>

    </div>

    <?php if (have_posts()): ?>
        <?php while(have_posts()): the_post(); ?>

        <div <?php post_class(); ?>>

    <?php 
                if ( has_post_thumbnail() ) {
                the_post_thumbnail('full');
            } ?> 

    <?php the_content(); ?>

            </a>
        <!--<div class="meta">Tags: <?php the_tags( '', ', ', '<br />' ); ?> </div>-->
        </div>
        <?php endwhile; ?>
    <?php else : ?>
        <h2>Couldn’t find any articles!</h2>
    <?php endif; ?>
</div>

<script>
    var $btns = $('.btn').click(function() {

      if (this.id == 'all') {
        $('.projekte > .post').fadeIn(300);
      } else {
        var $el = $('.' + this.id).fadeIn(300);
        $('.projekte > .post').not($el).fadeOut(300);
      }
      $btns.removeClass('active');
      $(this).addClass('active');
    })
</script> 

<?php get_footer(); ?>