Question

我希望在单击按钮时使一个div向上显示，同时将其顶部和底部的另一个div分别向上和向下推动。以下是视频的链接：

我尝试了许多jQuery方法，例如slideDown（），slideUp（），animate（）...都没有成功。关于JavaScript部分，我尝试向上移动表格（必须显示）的动画，同时向下移动带有“ widget”类的div。问题是，小部件的下移速度太快，整个动画效果不佳，以ms为单位设置时间无济于事。任何建议将不胜感激，非常感谢！

$("#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>

Answer 1

这是我的方法

Codepen demo

整个部分是flex项，垂直居中（带有小的负margin-top）。事实，如果内容发生更改，则会产生一种效果，即放置在此部分中的新内容会沿两个方向推动所有同级元素。

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')]
});

最终结果

Answer 2

尝试此代码

$(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>

使div向上显示，同时向上或向下推动同级div

2 个答案: