BodyaK BodyaK - 6 months ago 61
Javascript Question

jQuery UI slide animation for both elements

I'll very appreciate if someone gives solution for the animation "problem" below, when one div appears with animation, others just jump into the new position without any effect:

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

width: 300px;
height: 30px;
background: black;
height: 100%;
width: 50px;
background: red;
color: white;

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

<script src=""></script>
<script src="" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

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

How to make both divs animate with jQuery UI slide effect?


If you'd like to both divs have the same UI effect, you'll to select both. So far you only have .menu.

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

convert to -->

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

UPD: I think if you add to css transition: all 1s ease; to content element it would work. Use webkits to ensure cross-browser compatibility.

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