两个元素的 jQuery UI 幻灯片动画

Question

如果有人为下面的动画“问题”提供解决方案，我将非常感激，当一个 div 出现动画时，其他 div 只是跳到新位置而没有任何效果：

$("header").on("click", ".click", function(){
        $(".menu").toggle("slide", { direction: "up" }, 300);
    });

header{
  width: 300px;
  height: 30px;
  background: black;
}
  .click{
    height: 100%;
    width: 50px;
    background: red;
    color: white;
}

main{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 300px;
}
  .menu{
    width: 100%;
    height: 30px;
    background: blue;
    color: white;
  }
  .content{
    width: 100%;
    height: 60px;
    background: green;
    color: white;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script>

<header>
  <div class="click">Click</div>
 </header>
<main>
  <div class="menu" hidden="true">I'm falling from above slowly...</div>
  <div class="content">Why am I jumping?</div>
</main>

如何让两个 div 都带有 jQ​​uery UI 幻灯片效果？

Answer 1

如果您希望两个 div 具有相同的 UI 效果，您将选择两者。到目前为止，您只有 .menu。

$(".menu").toggle("slide", { direction: "up" }, 300);

转换为-->

$(".menu, .content").toggle("slide", { direction: "up" }, 300);

UPD：我认为如果你添加到 css 过渡：所有 1s 轻松；到内容元素它会起作用。使用 webkits 确保跨浏览器兼容性。

.content {
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
}

Answer 2

为什么你会为此特别需要 jqueryUi？

更换

$("header").on("click", ".click", function(){
    $(".menu").toggle("slide", { direction: "up" }, 300);
});

与

$("header").on("click", ".click", function(){
    $(".menu").slideToggle(300);
});

应该做的伎俩。

FIDDLE