Question

我非常感谢有人为动画提供解决方案＆＃34;问题＆＃34;下面，当一个div出现动画时，其他人只是跳进新位置而没有任何效果：

＆＃13;

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

＆＃13;

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;
 }

＆＃13;

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

＆＃13;

如何使用jQuery UI幻灯片效果使两个div动画化？

Answer 1

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

$（“。menu”）。toggle（“slide”，{direction：“up”}，300）;

转换为 - ＆gt;

$（“。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

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

2 个答案: