Переключение двух скользящих элементов Jquery приводит к небольшому сдвигу / прыжку / прыжку - PullRequest
Новая
       7

Переключение двух скользящих элементов Jquery приводит к небольшому сдвигу / прыжку / прыжку

0 голосов
/ 15 сентября 2018

У меня есть два элемента, высота которых зависит от высоты просмотра страницы.Я хочу плавно скользить по одному, а по другому.Когда я пытаюсь это сделать, содержимое после двух элементов сдвигается вверх и вниз на пару пикселей.Когда я смотрю на другие примеры этого двойного слайда, такого сдвига нет.Но когда я воссоздаю это, это случается.Первоначально я подозревал, что это из-за того, что высота div'ов вне высоты видимости вызывает проблемы, но я все еще получаю ту же проблему с фиксированными div-значениями высоты.Я также дважды проверил наличие проблем с отступами и полями, но их нет.

JSFiddle: https://jsfiddle.net/1ox9t3q8/ (нажмите на div для переключения слайдов.)

HTML: 

<div class="first swap-div">
hello world
</div>

<div class="second swap-div">
hello world
</div>

<div class="other-stuff">
hello world
</div>

JS: 

$(document).on('click', '.swap-div', function() {
    $('.swap-div').slideToggle('slow');
});

CSS: 

.other-stuff {
  background-color: green;
}

.swap-div {
  background-color: blue;
  display: flex;
  height: 65vh;
}

.second {
  display: none;
}

1 Ответ

0 голосов
/ 15 сентября 2018

Кажется, что анимации не полностью синхронизируются при каждом запуске. Вместо этого вы можете анимировать только один элемент div, а другой ответить с помощью CSS. Таким образом, CSS может настроить неанимированный div, чтобы заполнить необходимое пространство, не перезаписываясь несинхронизированным jquery.

Вот пример того, о чем я говорю. 

$(document).on('click', '.swap-div', function() {
  $('.first').slideToggle('slow');
});
.other-stuff {
  background-color: green;
}

.swap-div {
  background-color: grey;
}

.swap-wrapper {
  height: 65vh;
  display: flex;
  flex-direction: column;
  border: 2px solid black;
}

.first {
  height: 65vh;
}

.second {
  flex: 1;
  overflow: hidden;
  border-top: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swap-wrapper">

  <div class="first swap-div">
    hello world
  </div>

  <div class="second swap-div">
    hello world1
  </div>
</div>
<div class="other-stuff">
  hello world2
</div>

То, что я сделал, это обернул скользящие элементы div оберткой, которая была такой же высоты, как и первый элемент div, затем я установил второй элемент div для сгибания.

...