Slide down and up function problem with flex: 1

Question

$(".div3Btn").click(function() {
  $(".div2").show("slide", {
    direction: "up"
  }, 5000);
});

.div1 {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #919191;
}

.div2 {
  display: flex;
  overflow-y: auto;
  flex: 1;
  height: 500px;
  background-color: #a8d810;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div1">
  <div class="div2" style="display: none;">hjghjgjghj</div>
  <div class="div3">
    <button class="div3Btn">Click me!</button>
  </div>
</div>

I have a question about using the show()/hide() function with time and direction. As the above snippet shows, if the button was clicked, it will immediately jump to the bottom, but not following the div1 to slide down. Then how can I fix it if I want to use that function?

$(".div3Btn").click(function() {
  $(".div2").slideToggle(5000);
});

.div1 {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #919191;
}

.div2 {
  display: flex;
  overflow-y: auto;
  flex: 1;
  height: 500px;
  background-color: #a8d810;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <div class="div2" style="display: none;">hjghjgjghj</div>
  <div class="div3">
    <button class="div3Btn">Click me!</button>
  </div>
</div>

(The problem is quite similar to using Firefox to run the link function)

Another question about slide down and up is when I use flex: 1 for some divs, and then use the slideToggle() function, it does not have any slide down or up animation of the div. How to fix it if I must use flex: 1 for divs?

Answer 1

I think you've formatted the .show() function wrong. Try .show( duration [, easing ] [, complete ] )

$(".div3Btn").click(function() {
  $(".div2").show(5000, "swing", function() {
    // Animation complete.
  });
});

.div1 {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #919191;
}

.div2 {
  display: flex;
  overflow-y: auto;
  flex: 1;
  height: 500px;
  background-color: #a8d810;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div1">
  <div id="div2" class="div2" style="display: none;">hjghjgjghj</div>
  <div class="div3">
    <button id="div3Btn" class="div3Btn">Click me!</button>
  </div>
</div>