$(".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>





我有一个关于在时间和方向上使用show() / hide()函数的问题。如上面的代码片段所示,如果单击该按钮,它将立即跳至底部,但不会跟随div1向下滑动。如果要使用该功能,该如何解决?



$(".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>





(问题与使用Firefox运行链接功能非常相似)

关于上下滑动的另一个问题是,当我对某些div使用flex: 1,然后使用slideToggle()函数时,它没有div的上下滑动动画。如果必须对div使用flex: 1怎么解决?

最佳答案

我认为您将.show()函数的格式设置错误。尝试.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>

10-05 21:06
查看更多