单击时淡出div，然后淡入

Question

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

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

有人可以帮忙找出原因吗？

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

Answer 1

您正在使用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。

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