Wordpress篩選器按鈕：內容淡入和淡入

Question

我正在使用此javascript來打開和關閉網站上某些內容的顯示，具體取決於后端中設置的內容類別：

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

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

當內容設置為active （即正在顯示）時，它會很好地淡入。 如何讓消失的內容同樣平滑地消失？ 截至目前，它只是立即消失，這嚴重破壞了網站的視覺效果。

可以在此處查看腳本的實時演示： http : //udkdev.skopec.de/category/projekte/

Answer 1

您是否嘗試了fadeOut（）;？

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

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

Answer 2

使用jQuery方法-fadeOut（）或為元素類定義CSS過渡。

$('.projekte > .post').not($el).hide();

可以替換為

$('.projekte > .post').not($el).fadeOut();