jQuery странное взаимодействие между .hide () и .show ()

Question

У меня на сайте два элемента в одном контейнере.Один виден (дисплей: блок), а другой скрыт (дисплей: нет).На событии я хочу, чтобы видимый элемент скрывался, а скрытый элемент отображался.Проблема в том, что когда я показываю скрытый элемент после скрытия видимого элемента, у него всегда есть доля секунды, когда он переходит от своей предыдущей сложенной позиции поверх видимого элемента к позиции, в которой он должен быть:

Velocity(document.getElementById("originallyVisible"), { opacity: 0 }, { display: "none" }, {duration: 500});
Velocity(document.getElementById("originallyHidden"),{ opacity: 1 },{ display: "block" },{duration: 500, delay: 200000});

Примечание: код находится в speed.js, но он должен быть эквивалентен .hide () и .show () в нативном jQuery, согласно документации.Пожалуйста, дайте мне знать, если проблема связана со скоростью.

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

Почему это происходит?

Answer 1

Есть ли в speed.js обратный вызов события после анимации, такой как JQuery?

В этом обратном вызове JQuery сначала будет скрыт элемент перед показом следующего элемента:

$("#originallyVisible").fadeOut(300,function(){
    $("#originallyHidden").fadeIn(300);
});

Другой способ сделать этоиспользуя ключевые кадры css с плавными эффектами, устанавливая синхронизацию для каждого элемента и добавляя к первоначально видимому классу .hideElement и originalHidden, применяем .showElement

Я думаю, что это интересный speed.js, я проверю это в ближайшее время.Надеюсь, это поможет:)

Answer 2

Вы указываете оба изменения с полусекунды duration, что означает, что примерно полсекунды оба элемента видны на экране (один исчезает, другой исчезает).

ЕслиВы не хотите, чтобы ваши элементы прыгали вокруг, вам нужно убедиться, что, если оба они показаны, они не взаимодействуют друг с другом отрицательно - возможно, установив position: absolute и расположив их друг над другом визуально.

(Кстати, я не уверен, что delay правильно, это 200 секунд? Интересно, он вообще что-то делает?)