SlideToggle шалит. Поможете?

Question

[Snowfall_Zh]

Видео с проблемой. https://youtu.be/zjjBlISqxuA

SlideToggle открывается затем отскакивает назад и только затем встает на свое место. А при закрытии закрывается очень быстро закрыается. А затем, после закрытия, если не убирать мышку с области экрана, то, там образуются странные полоски. Причем каждый раз разные.

@media (max-width: 930px){
	.container{
		width: 748px;
	}

	.header{
		height: 50px;
		background-color: #fff;
		&__logo-img svg{
			height: 45px;
		}
		&__logo-text{
			font-size: 38px;
			color: #000;
		}

		&__logo-img svg{
			fill: #000;
		}
		&__menu{
			display: none;
			position: absolute;
			background-color: #fff;
			top: 	49px;
			right: 0;
			width: 100%;
			height: 350px;
			z-index: 11;
		}

		&__menu-li{
			margin-top: 18px;
			text-align: center;
		}
	
		&__menu-li:first-of-type{
			margin-left: 18px;
		}
		&__menu-a{
			color: #000;
		}

		&__menu-close{
			width: 100%;
			height: 100vh;
			z-index: 1;
			background-color: transparent;
			position: absolute;
		}

		&__burger-wrapper{
			height: 30px;
			width: 35px;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 20;
		}
	
		&__burger{
			display: block;
			width: 35px;
			height: 5px;
			background-color: #000;
			position: relative;
			transition: background-color 0.2s ease-in 0.2s;
		}
	
		&__burger::before{
			position: absolute;
			content: "";
			display: block;
			width: 35px;
			height: 5px;
			background-color: #000;
			left: 0;
			top: -10px;
			transition:  transform 0.2s ease-in, top 0.2s  linear 0.2s;
		}
		&__burger::after{
			position: absolute;
			content: "";
			display: block;
			width: 35px;
			height: 5px;
			background-color: #000;
			left: 0;
			bottom: -10px;
			transition:  transform 0.2s ease-in, top 0.2s  linear 0.2s;
		}
	
		&__burger.active{
			background-color: transparent;
			transition: background-color 0.2s ease-in 0.2s
		}
		&__burger.active::before{
			transform: rotate(-45deg);
			top: 0;
			transition: top 0.2s  linear, transform 0.2s ease-in 0.2s;
		}
		&__burger.active::after{
			transform: rotate(45deg);
			top: 0;
			transition: top 0.2s  linear, transform 0.2s ease-in 0.2s;
		}
	}
}

if (window.screen.width < 778) {

		$('.header__burger-wrapper').click(function () {
			$(".header__burger").toggleClass('active'),
				$(".header__menu").slideToggle(),
				$(".header__menu-close").slideToggle()
		})

		$('.header__menu-close').click(function () {
			$(".header__burger").toggleClass('active'),
				$(".header__menu").slideUp(),
				$(".header__menu-close").slideUp()
		})

		$('.header__menu-a').click(function () {
			$(".header__menu").slideUp(),
				$(".header__menu-close").slideUp(),
				$(".header__burger").toggleClass('active')
		})
	}

Comments

[Rustam Bainazarov]

Шаманство. А без кода это вообще превращается в сеанс гадания.

[Snowfall_Zh]

Рустам Байназаров,

if (window.screen.width < 778) {

		$('.header__burger-wrapper').click(function () {
			$(".header__burger").toggleClass('active'),
				$(".header__menu").slideToggle(),
				$(".header__menu-close").slideToggle()
		})

		$('.header__menu-close').click(function () {
			$(".header__burger").toggleClass('active'),
				$(".header__menu").slideUp(),
				$(".header__menu-close").slideUp()
		})

		$('.header__menu-a').click(function () {
			$(".header__menu").slideUp(),
				$(".header__menu-close").slideUp(),
				$(".header__burger").toggleClass('active')
		})
	}

[strelok011]

Для начала уберите двойные вызовы слайда

[Snowfall_Zh]

strelok011, Убрал вообще все, оставил только -

$('.header__burger-wrapper').click(function () {
        $(".header__menu").slideToggle()
    })

Полоски от -
$(".header__menu-close").slideToggle()

А вот прыгучесть никуда не делась.

[strelok011]

Snowfall_Zh, не забывайте прикладывать результат, к чему привело :)
а если есть возможность - то фиддл бы очень выручил

[strelok011]

следующий шаг - закомментировать все трансформы и смещения, и начинать добавлять поэтапно.

[Snowfall_Zh]

strelok011, Короче, я хз из-за чего все это. Надоело копаться и я решил просто заменить .header__menu на .hide__menu (создал еще один меню, а прошлый скрыл). Все работает. https://youtu.be/02wlOcOyhnw

[Snowfall_Zh]

strelok011, Если тебе все еще интересно, то проблема того почему Тоггл прыгает в том, что там стоит transition. И всего то.