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

Question

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

0

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

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

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

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

См. Этот сайт и переключитесь между "info view" и "video view" 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>

Francesca 20 фев. 2014, в 17:25

Источник

Теги:

jquery

transitions

fadein

fadeout

1 ответ

Ещё вопросы

gts · Answer 1 · 2014-02-20T14-03-00.000Z

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

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