BodyaK BodyaK - 1 year ago 165
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?

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download