单击淡出 div 然后淡入

Question

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

为了解决这个问题，我尝试在切换按钮上应用 setTimeout 函数，以便我可以先淡出父 div #post-list，然后执行布局更改，最后淡入 #post-list再次显示更新的布局。当我实现这个时，虽然淡入/淡出工作但布局没有改变：http://jsfiddle.net/qvLoLhy7/

谁能帮忙找出为什么会发生这种情况？

这是 JS 的 sn-p：

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 );
    } );
}

Answer 1

您正在使用 jquery，但您并没有真正使用 jquery。 Jquery 附带了一个可以使用的淡入淡出动画。

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
  });
});

Here 是一个基本示例。

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

如果这就是您要找的，请告诉我。