На клик выцветают div, затем исчезают в

Question

Я внедрил страницу с просмотром туров, в которой вы можете переключаться между списком и сеткой, анимации между состояниями переключения немного уродливы (переключение между двумя ссылками вверху и увидеть, что я имею в виду): 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 поставляется с анимацией 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 
    }); 
}); 

Here является основным примером.

Вы также должны преобразовать свой код в эквивалент jquery.

Сообщите мне, если это то, что вы искали.