Делать div, чтобы показать вверх, в то же время толкая вверх и вниз div братьев и сестер - PullRequest
Новая
       8

Делать div, чтобы показать вверх, в то же время толкая вверх и вниз div братьев и сестер

0 голосов
/ 10 октября 2018

Я бы хотел, чтобы после нажатия кнопки, чтобы div отображался вверх, одновременно нажимая другой div вверху и внизу вверх и вниз соответственно.Ниже приведена ссылка на видео о том, как это должно выглядеть:

[https://streamable.com/ynnvn][1]

Я пробовал многие методы jQuery, такие как slideDown (), slideUp (), animate ()... безуспешно.Что касается части JavaScript, я попытался анимировать форму (которая должна быть показана) вверх, перемещая div с классом «widget» вниз.Проблема в том, что виджет движется слишком быстро, вся анимация не плавная, и установка времени в мс не помогает. Любой совет будет оценен, большое спасибо! 

$("#anmelden").click(() => {
  $("#my_form").slideUp(1000);
});

$("#zufall").click(() => {
  $("#my_form").show("slide", {
    direction: "down"
  });
  $(".widget").animate({
    "top": "3.0rem"
  });
});
.widget {
  background-color: white;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  width: 19vw;
  position: relative;
  top: 4.5rem;
  margin: 4.8rem auto;
}

.container {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border: 1px solid black;
  font-size: 1.4rem;
  padding-top: 0px !important;
  position: relative;
  bottom: 56rem;
  margin: 0 auto;
  width: 19vw;
  height: 40vh;
}

form {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 4rem;
  margin-top: 4rem;
  padding-top: 3rem;
  position: relative;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div class="container">
  <div class="header">Title</div>
  <form action="submit" id="my_form">
    <input type="text" placeholder="Name" class="text_input">
    <input type="text" placeholder="Passwort" class="text_input">
  </form>
  <div class="widget">
    <button class="btn first_btn" id="zufall">zufalls button</button>
    <button class="btn second_btn" id="anmelden">anmelden</button>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Вот мой подход

Демонстрация Codepen

Весь раздел представляет собой элемент flex, вертикально центрированный (смаленький отрицательный margin-top). Ipso facto , если содержимое изменяется, результатом является эффект, при котором новое содержимое, помещенное в раздел, выталкивает все элементы одного уровня в обоих направлениях.

button просто переключаеткласс .open, который запускает анимацию CSS, показывающую (и скрывающую) набор полей одного и того же брата (в разметке кнопки были определены до fieldset, но они отображаются после благодаря свойству order.

Разметка 

<section class="login">
  <h1>Wir suchen noch <br />Frontend-Helden</h1>

  <form>   
    <button type="button" class="login__btt login__btt--zufalls"
            data-collapsed-text="zufalls button"
            data-expandend-text="abbrechen">zufalls button</button>
    <button type="button" class="login__btt login__btt--anmelden">anmelden</button>

    <fieldset class="login__credentials">
      <ul>
        <li>
           <label for="username">User</label>
           <input type="text" id="username" />
        </li>
        <li>
          <label for="password">Password</label>
          <input type="password" id="password" />
        </li>
    </fieldset>
  </form>
</section>

CSS (актуально, см. Демонстрацию для полного стиля) 

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    min-height: 500px;
    text-align: center;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;  
    font-size: 1.5rem;  
    background: linear-gradient(135deg, #9bc, yellowgreen) 0 0 no-repeat;
    background-size: 100% 50vh; }


.login {
    width: 500px;
    margin: -20vh auto 0 auto; }


.login form {
    box-shadow: 0 0 20px #9bc;
    padding: 2em;
    display: flex;
    background: #fff;
    flex-direction: column; }


.login ul { 
    list-style-type: none; 
    margin: 0; padding: 0; 
    width: 100% }


.login li { 
    margin-bottom: 20px; 
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 300px; }


.login__btt {
    display: block;
    cursor: pointer;
    margin: 1em auto;
    order: 1;
    width: 300px;
    padding: .8em 2em;
    border: 1px #ccc solid;
    border-radius: 5px;
    font-size: .65em; }


.login__credentials {
    order: 0;
    border: 0;
    overflow: hidden;
    padding: 0;
    width: 260px;
    text-align: left;
    margin: 0 auto;
    opacity: 0;
    height: 0;
    transition: height 1s .1s, opacity .25s 0s; }


.open ~ .login__credentials {
    transition: height 1s 0s, opacity .5s .5s;
    height: 140px;
    opacity: 1; }

JS 

let btt_zufalls = document.querySelector('.login__btt--zufalls');

btt_zufalls.addEventListener('click', function(){
    this.classList.toggle('open');
    this.textContent = [this.dataset.collapsedText, this.dataset.expandedText][+this.matches('.open')]
});

Конечный результат

enter image description here

0 голосов
/ 10 октября 2018

попробуйте этот код 

$(document).ready(function() {
  $("#hider").click(function() {
    $("#going_hide").hide();
  });
});
$(document).ready(function() {
  $("#shower").click(function() {
    $("#going_hide").show();
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-2 col-md-2 col-md-2"></div>
    <div class="col-sm-8 col-md-8 col-md-8">
      <div class="well">
        <div class="row" id="going_hide">
          <div class="col-sm-2 col-md-2 col-md-2">
            <div class="form-group">
              <label for="usr">Name:</label>
              <input type="text" class="form-control" id="usr">
            </div>
            <div class="form-group">
              <label for="pwd">Password:</label>
              <input type="password" class="form-control" id="pwd">
            </div>
          </div>
        </div>
        <div class="row" id="going_show">
          <div class="col-sm-2 col-md-2 col-md-2">
            <div class="form-group">
              <button type="button" class="btn btn-warning" id="hider">Hide</button>
            </div>
            <div class="form-group">
              <button type="button" class="btn btn-danger" id="shower">Show</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-2 col-md-2 col-md-2"></div>
  </div>
</div>
...