javascript - 单击淡出 div 然后淡入

Question

我实现了一个切换 View 页面，您可以在列表和网格之间切换切换状态之间的动画有点难看(使用顶部的两个链接切换以了解我的意思):http://jsfiddle.net/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 带有淡入和淡出动画，您可以使用。

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。

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