Javascript 单击淡出div，然后淡入

我已经实现了一个切换视图页面，您可以在列表和网格之间切换切换状态之间的动画有点难看（使用顶部的两个链接切换以了解我的意思）：

为了解决这个问题，我尝试在切换按钮上应用

setTimeout

功能，这样我可以先淡出父div

#post list

，然后执行布局更改，最后再次淡出

#post list

，以显示更新的布局。当我实现此功能时，淡入/淡出功能正常，但布局不变：

有人能帮忙找出为什么会发生这种情况吗

以下是JS的一个片段：

function init() {
    optionSwitch.forEach( function( el, i ) {
        el.addEventListener( 'click', function( ev ) {

            $('#post-list').addClass('go'); // Fade out

            setTimeout(function() {
                _switch( this ); //Update layout. Switch refers to another function
            }, 500);


            setTimeout(function() {
                 $('#post-list').removeClass('go'); // Fade new layout back in
            }, 1000);

        }, false );
    } );
}

---

您正在使用jquery，但实际上并没有使用jquery。Jquery附带了一个可以使用的fadeIn和fadeOut动画

var $pl = $('#post-list');
$pl.fadeOut('slow', function(){
  //call back when animation is done
  //here you can apply layout changes
  $pl.fadeIn('slow', function(){
     //call back when the fade in animation is done
     //do other stuff here
  });
});

这是一个基本的例子

您还应该将代码转换为与jquery等效的代码

---

让我知道这是否是您想要的。

对于像我这样的新手来说，这对我来说没有多大意义，尽管我相信这对一位经验丰富的专业人士来说是有意义的！我不知道如何将我的代码与您的代码合并以实现我需要的解决方案。你能为我提供更多的细节吗？