Добавление кастомной анимации в функцию fadeIn() || fadeOut()?

Question

[AsdfAsdfSK]

Добрый вечер . Возник вопросик :
По тестовому заданию было сказано реализовать анимацию исчезновения и появления элемента при помощи jquery функций fadein и fadeout ,однако анимации должны быть не дефолтными(просто смена опасити до нуля) , а появление слева-направо и изчезновение справа-налево(скрин ниже)
Может тут найдутся те,кто реализовывал подобную задачу и готовы помочь советом .
Заранее спасибо.

Comments

[Пашенька]

Нужно смотреть не в эти функции, а использовать метод $.animate() и анимировать ширину элемента.

[AsdfAsdfSK]

like-a-boss, Допустим если и так ,а каким образом я могу управлять направлением изменения ширины? То есть не справа налево,а слево направо. И наоборот соответствтенно

[Andrew]

AsdfAsdfSK, прижмите элемент к правому краю или обертку сделайте(с dflex row justify-content:flex-end;) и внутри неё меняйте ширину

[Пашенька]

sashabeep, да джейквери - в принципе дерьмо, чего от него хотеть. Просто setTimeout или setInterval (на чём там работает $.animate()) впринципе не пригоден для задачи анимирования. Но автор вопроса пока на большее не способен, а когда проникнется, то сам должен придти к истине. Просто иногда нужно вступить в говно сначала.

[Пашенька]

sashabeep, да и, кстати, свойство width анимировать тоже плохая идея с точки зрения производительности. Нужно width изначально делать 100% оверфлов-хиденить родительский контейнер и анимировать transform: translate3d(x, 0, 0)

[Пашенька]

sashabeep, я лично себе написал ванильный аналог такого анимэйт, работающий на правильных технологиях. А джейквери давно выкинуть пора. Это просто легаси, не более.

Answer 1

[Дуболом Одноклеточный]

Это не к fadeIn и fadeOut нужно обращаться.
Эти функции работают с opacity.
Оберни кнопку в блок, задай ему в Css width: 0;
а в Js напиши вот что:
имя кнопки.toggleClass(название класса);

В Css:
.название класса {
width: 100%;
}