Плавные переходы других элементов на.fadeOut

Question

Я использую jQuery .fadeOut переключаться между "загроможденным" видом и "минималистским" видом.

Когда вы нажимаете кнопку "Просмотр вида", она удаляет много загроможденной информации, чтобы вы могли сфокусироваться на видео (которое будет воспроизводиться в фоновом режиме, в настоящее время отключено).

Моя проблема в том, что оставшиеся элементы остаются на месте, а затем, когда другие элементы полностью исчезают, они "подпрыгивают" вверх, что выглядит довольно некрасиво.

Есть ли способ заставить эти существующие элементы изящно переходить на свои новые позиции, а не просто "прыгать"?

Пожалуйста, посетите этот сайт и переключайтесь между "просмотром информации" и "просмотром видео" http://fh80.student.eda.kent.ac.uk/fyp/

Вот код:

<script>
/* Video view */

// With the element initially shown, we can hide it slowly:
$( ".switchViewHide" ).click(function() {
    $( ".topTitles h2" ).fadeOut("slow");
    $(".topControls h3").fadeOut("slow");
    // $(".topControls h3").fadeOut("slow"); // duplicate
    $("#videoControls p").fadeOut("slow");
    $("#pageControls div.switchViewHide").fadeOut("slow");
    $("#pageControls div.switchViewShow").fadeIn("slow");
    $("#countdownBar").fadeOut("slow");
    $("#grid").fadeOut("slow");
    $("body").addClass('videoView')
});

/* Info view */

// With the element initially shown, we can hide it slowly:
$( ".switchViewShow" ).click(function() {
  $( ".topTitles h2" ).fadeIn( "slow");
  $(".topControls h3").fadeIn("slow");
  $(".topControls h3").fadeIn("slow");
  $("#videoControls p").fadeIn("slow");
  $("#countdownBar").fadeIn("slow");
  $("#grid").fadeIn("slow");
  $("#pageControls div.switchViewHide").fadeIn("slow");
  $("#pageControls div.switchViewShow").fadeOut("slow");
});
</script>

Answer 1

Есть ли какая-то причина, по которой вы не можете, чтобы.wrapper-dropdown-1 и.loginbox облегчали / меняли свою позицию вверх и вниз соответственно, когда происходят остальные преобразования? Например, вверх (в минимальном представлении) это будет что-то вроде:

$( ".switchViewShow" ).click(function() {
......(other existing code).....
$('.wrapper-dropdown-1, .loginbox').animate({
      top: '-=120'
    }, 1000);
}