Сдвиньте вверх и вверх проблему с функцией flex: 1 - PullRequest
Новая
       33

Сдвиньте вверх и вверх проблему с функцией flex: 1

0 голосов
/ 24 марта 2019 

$(".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 для запуска функции ссылки)

Еще один вопрос о скольжении и увеличениикогда я использую flex: 1 для некоторых div, а затем использую функцию slideToggle(), у него нет анимации скольжения вниз или вверх div.Как это исправить, если я должен использовать flex: 1 для divs?

1 Ответ

0 голосов
/ 24 марта 2019

Я думаю, вы неправильно отформатировали функцию .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>
...