Как объединить 2 скрипта?

Question

Хочу сделать выпадающее окно авторизации на сайте с помощью DropDown menu. Но данное окно вылетает резко, что не очень красиво. Я могу анимировать с помощью visibility: и opacity, но тогда весь код будет активным в исходнике, что не хотелось бы, нужно чтобы он был скрыт, как и полагается с помощью display: none.

Нужно сделать универсально, чтобы эффект плавности можно было применить не только к одному меню, но и к другим, так как буду делать не только для авторизации, но и еще несколько таких окон будет с помощью DropDown menu.

Сам код:

$('#search_btn').click(function() { $('.dropdown').toggleClass("search_open");return false;});
$('#btn-closed_dropdown').click(function() { $('.dropdown').toggleClass("search_open");return false;});

/* --- Bootstrap --- */
/* DropDown Меню и формы */
.dropdown {position: relative;}
.dropdown-menu-padding {
	padding: 15px 25px;
}
.dropdown-menu {
  position: absolute;
  min-width:305px;
  left:0;
  top:45px;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 -2px 15px rgba(15, 4, 0, .1);
  display: none;
}

.search_open .dropdown-menu,
.search_open #dropdown-search {
	display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown">
<a id="search_btn" href="{profile-link}">Авторизация</a>

<div class="dropdown-menu dropdown-menu-padding">
Ку-ку, я кукушка Люся!
<a id="btn-closed_dropdown" href="#">Закрыть меню</a>
</div>
</div>

Answer 1

Как вариант:

$('#search_btn').click(function() {
  $('.dropdown-menu').toggleClass("search_open");
  return false;
});
$('#btn-closed_dropdown').click(function() {
  $('.dropdown-menu').removeClass("search_open");
  return false;
});

/* --- Bootstrap --- */


/* DropDown Меню и формы */

.dropdown {
  position: relative;
}

.dropdown-menu-padding {
  padding: 15px 25px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0 auto;
  min-width: 305px;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 -2px 15px rgba(15, 4, 0, .1);
}

.search_open {
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: window__open 0.4s linear;
}

@keyframes window__open {
  0% {
    top: 0%;
  }
  100% {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown">
  <a id="search_btn" href="{profile-link}">Авторизация</a>
</div>

<div class="dropdown-menu dropdown-menu-padding">
  Ку-ку, я кукушка Люся!
  <a id="btn-closed_dropdown" href="#">Закрыть меню</a>
</div>

Дополнительный вариант с обратной анимацией при клике на кнопку закрытия:

$('#search_btn').click(function() {
  $('.dropdown-menu').toggleClass("window_open");
  return false;
});
$('#btn-closed_dropdown').click(function() {
  $('.dropdown-menu').addClass("window_close");
  setTimeout(function() {
    $('.dropdown-menu').removeClass("window_close");
    $('.dropdown-menu').removeClass("window_open");
  }, 900);
  return false;
});

/* --- Bootstrap --- */


/* DropDown Меню и формы */

.dropdown {
  position: relative;
}

.dropdown-menu-padding {
  padding: 15px 25px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  margin: 0 auto;
  min-width: 305px;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 -2px 15px rgba(15, 4, 0, .1);
}

.window_open {
  display: block;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: window__open 0.4s linear;
}

@keyframes window__open {
  0% {
    top: 0%;
  }
  100% {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.window_close {
  display: block;
  top: -100%;
  transform: translate(-50%, -50%);
  animation: window__close 0.8s linear;
}

@keyframes window__close {
  0% {
    top: 50%;
  }
  50% {
    top: 60%;
  }
  100% {
    top: -100%;
    transform: translate(-50%, -50%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown">
  <a id="search_btn" href="{profile-link}">Авторизация</a>
</div>

<div class="dropdown-menu dropdown-menu-padding">
  Ку-ку, я кукушка Люся!
  <a id="btn-closed_dropdown" href="#">Закрыть меню</a>
</div>

Answer 2

По короче запись с обратным эффектом(открытие и закрытие) но без jQuery

document.querySelector("#search_btn").onclick = fade;
document.querySelector("#btn-closed_dropdown").onclick = fade;

function fade() {
  document.querySelector(".dropdown-menu ").classList.toggle("open");
}

.dropdown {
  position: relative;
}

.dropdown-menu-padding {
  padding: 15px 25px;
}

.dropdown-menu {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -1000px);
  top: 0;
  margin: 0 auto;
  min-width: 305px;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 -2px 15px rgba(15, 4, 0, .1);
  transition: 0.68s cubic-bezier(.68,-0.55,.27,1.55);
}

.dropdown-menu.open{
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="dropdown">
  <a id="search_btn" href="#">Авторизация</a>
</div>

<div class="dropdown-menu dropdown-menu-padding">
  Ку-ку, я кукушка Люся!
  <a id="btn-closed_dropdown" href="#">Закрыть меню</a>
</div>

Этот же эффект (открытие и закрытие) на jQuery

$("#search_btn").on("click", function() {
  $(".dropdown-menu ").toggleClass("open");
});

$("#btn-closed_dropdown").on("click", function() {
  $(".dropdown-menu ").toggleClass("open");
})

.dropdown {
  position: relative;
}

.dropdown-menu-padding {
  padding: 15px 25px;
}

.dropdown-menu {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -1000px);
  top: 0;
  margin: 0 auto;
  min-width: 305px;
  background: #fff;
  border: 1px solid #e6e6e6;
  box-shadow: 0 -2px 15px rgba(15, 4, 0, .1);
  transition: 0.68s cubic-bezier(.68, -0.55, .27, 1.55);
}

.dropdown-menu.open {
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="dropdown">
  <a id="search_btn" href="#">Авторизация</a>
</div>

<div class="dropdown-menu dropdown-menu-padding">
  Ку-ку, я кукушка Люся!
  <a id="btn-closed_dropdown" href="#">Закрыть меню</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

БЛОГ НА HUSL

Как объединить 2 скрипта?

Ответы (2 шт):