CODEWITHSUNDEEP
javascriptjquerycss
user2350334
user2350334

Reputation: 49

jQuery slide toggle animation makes other elements jumpy when resizing

So I'm trying to animate a sidebar sliding in from the left, and the animation works well but it makes the other element, which uses flex for sizing, jumpy while it automatically resizes. This is what it looks like: enter image description here

Here's some of my CSS:

body{
display: flex;
}

#sidebar{
display: none;
float: left;
height: 100%;
position: relative;
padding-left: 20px;
padding-right: 20px;
}

#mainScreen{
float: right;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}

And here's my basic HTML structure:

<body>
<div id="sidebar>
<!-- stuff -->
</div>
<div id="mainScreen">
<div id="headerCont"><!-- stuff --></div>
<div id="messageCont"><!-- stuff --></div>
<div id="chatInputCont"><!-- stuff --></div>
</div>
</body>

And the children of #mainScreen have another flex arrangement, but vertically. In Javascript I'm using $("#sidebar").toggle("slide", { direction: "left" }, 1000); when you click the menu button and it nearly works but I just want to eliminate the jumpiness. Does any know how to fix this, or if there are any alternative approaches I haven't thought of?

Upvotes: 1

Views: 198

Answers (1)

Aman
Aman

Reputation: 640

Its actually float creating problem, Its better restructure your HTML if Possible something like this.

<body>
 <div class="main-content>
   <div class="left-section">
     <div id="sidebar>
      <!-- stuff -->
     </div>
   </div>
   <div class="right-section">
     <div id="mainScreen">
     <div id="headerCont"><!-- stuff --></div>
     <div id="messageCont"><!-- stuff --></div>
     <div id="chatInputCont"><!-- stuff --></div>
     </div>  
   </div>
 </div>
</body>

Now remove float and use flex on .main-content.

css

.left-section {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
}

.left-section.slide {
  left: 0;
}

.main-content.slide {
  margin-left: 188px; // left-sidebar width
}

function sidebarClick(){
  $(".left-section, .main-content").toggleClass("slide");
}

Upvotes: 2

Related Questions