0

/* Добавляется класс для появления формы */
$(".form").click(function() {
  $(".form").addClass("active")
});
/* Добавляется id */
$('.close-btn').click(function() {
  $('.form').removeClass('active');
  $('.form').attr('id', 'close');
});
.form.active {
  padding: 24px;
  background: #6c4a27;
  border: 6px solid #cb9a4b;
  box-shadow: 0px 30px 20px -20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  width: 320px;
  height: 450px;
  -webkit-animation: openForm 1.4s;
  -webkit-animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
  animation: openForm 1.4s;
  animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
}

.form h1 {
  opacity: 0;
}

.active h1 {
  opacity: 1;
}

.form.active * {
  top: 0;
  opacity: 1;
}

.form.active::after,
.form.active::before {
  opacity: 0;
}

input,
textarea {
  top: 0;
  display: block;
  width: 100%;
  border: none;
  padding: 10px;
  background: #fefefe;
  margin: 12px 0 0 0;
  border: 2px solid #bbb;
}

input {
  top: 0;
}

input:nth-child(1) {
  transition: all 0.5s 1s ease;
}

input:nth-child(2) {
  transition: all 0.7s 1s ease;
}

textarea {
  top: 0;
  opacity: 1;
  max-height: 100px;
  transition: all 0.9s 1s ease;
}

h1 {
  top: 0;
  opacity: 1;
  text-align: center;
  font-size: 24px;
  text-transform: uppercase;
  color: #cb9a4b;
  margin-bottom: 32px;
  transition: all 0.3s 1s ease;
}

.form {
  width: 64px;
  height: 64px;
  background: #6c4a27;
  border: 6px solid #cb9a4b;
  box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
  position: fixed;
  right: 10px;
  bottom: 0;
  z-index: 9;
}

.form .btn-xl {
  display: block;
  margin: 30px auto;
}

.form::before,
.form::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 0px;
  height: 0px;
  opacity: 1;
  left: 10px;
  z-index: 100;
  transition: all 0.1s linear;
  -webkit-transform: scale(0.9999, 0.9999);
  transform: scale(0.9999, 0.9999);
}

.form::before {
  top: 15px;
  transform: perspective(1000) rotateX(0deg);
  transform-origin: 50% 0;
  border-top: 11px solid #fff;
  border-right: 16px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid transparent;
}

.form::after {
  top: 17px;
  border-top: 11px solid transparent;
  border-right: 16px solid #fff;
  border-bottom: 11px solid #fff;
  border-left: 16px solid #fff;
}

.form:hover::before {
  transform: perspective(1000) rotateX(180deg);
  transform-origin: 50% 0;
}

@-moz-keyframes openForm {
  0% {
    width: 64px;
    height: 64px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 320px;
    height: 450px;
  }
}

@-webkit-keyframes openForm {
  0% {
    width: 64px;
    height: 64px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 320px;
    height: 450px;
  }
}

@-o-keyframes openForm {
  0% {
    width: 64px;
    height: 64px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 320px;
    height: 450px;
  }
}

@keyframes openForm {
  0% {
    width: 64px;
    height: 64px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 320px;
    height: 450px;
  }
}

@media (max-width: 1000px) {
  .form {
    display: none;
  }
  .hide-own {
    display: block !important;
  }
  #etc {
    display: block !important;
  }
  #del {
    display: none !important;
  }
}

.form .form-control {
  background: none !important;
  border: none !important;
  height: 70px !important;
}

.date {
  line-height: 18px !important;
}

.form h1 {
  margin-bottom: 10px;
}

.form .btn {
  margin: 10px auto;
  padding: 10px 45.2px;
}

.close-btn {
  position: absolute;
  right: 10px;
  top: 10px !important;
  font-size: 20px;
  width: 20px;
  height: 20px;
  z-index: 10;
}

.form#close {
  -webkit-animation: closeForm 1.4s;
  -webkit-animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
  animation: closeForm 1.4s;
  animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
}

@-moz-keyframes closeForm {
  0% {
    width: 320px;
    height: 450px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 64px;
    height: 64px;
  }
}

@-webkit-keyframes closeForm {
  0% {
    width: 320px;
    height: 450px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 64px;
    height: 64px;
  }
}

@-o-keyframes closeForm {
  0% {
    width: 320px;
    height: 450px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 64px;
    height: 64px;
  }
}

@keyframes closeForm {
  0% {
    width: 320px;
    height: 450px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 64px;
    height: 64px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Форма -->
<div class="form">
  <i class="fa fa-times close-btn" aria-hidden="true"></i>
  <h1>Форма записи</h1>
  <form action="mail/little_me.php" method="post" id="contactForm">
    <div class="form-control">
      <input type="text" placeholder="Ф.И.О." required data-validation-required-message="Пожалуйста, заполните это поле!" name="name_little" id="name_little" />
      <p class="help-block text-danger"></p>
    </div>
    <div class="form-control">
      <input type="tel" placeholder="Номер телефона" required data-validation-required-message="Пожалуйста, введите свой номер!" name="phone_little" id="phone_little" />
      <p class="help-block text-danger"></p>
    </div>
    <div class="form-control">
      <input type="text" placeholder="Курс" required data-validation-required-message="Выберите курс!" name="curs_little" id="curs_little" />
      <p class="help-block text-danger"></p>
    </div>
    <div class="form-control">
      <input type="email" class="date" required data-validation-required-message="Пожалуйста, напишите почту!" name="email_little" id="email_little" placeholder="Почта">
    </div>
    <div class="success"></div>
    <button type="submit" class="btn-down btn btn-xl" style="margin-bottom: 50px;">
          <span class="btn-paint"></span>
          <span class="btn-paint"></span>
          <span class="btn-paint"></span>
          <span class="btn-paint"></span>
          <span class="btn-label">Отправить</span>
        </button>
  </form>
</div>

UPD: Добавил CSS, дабы была более понятна ситуация. Надо развернуть на полный экран.

3 ответа 3

3

Происходит это, потому что при клике на .close-btn вы удаляете класс и в этот же момент его добавляете, так как .close-btn находится внутри .form, на клике на которую уже прописано добавление класса. Для раскрытия формы лучше добавьте новую кнопку и вешайте событие именно на нее.

/* Добавляется класс для появления формы */
$('.open-btn').click(function() {
  $('.form').addClass('active')
});
/* Добавляется id */
$('.close-btn').click(function() {
  $('.form').removeClass('active');
  $('.form').attr('id', 'close');
});
.form.active {
  padding: 24px;
  background: #6c4a27;
  border: 6px solid #cb9a4b;
  box-shadow: 0px 30px 20px -20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  width: 320px;
  height: 450px;
  -webkit-animation: openForm 1.4s;
  -webkit-animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
  animation: openForm 1.4s;
  animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
}

.form h1 {
  opacity: 0;
}

.active h1 {
  opacity: 1;
}

.form.active * {
  top: 0;
  opacity: 1;
}

.form.active::after,
.form.active::before {
  opacity: 0;
}

input,
textarea {
  top: 0;
  display: block;
  width: 100%;
  border: none;
  padding: 10px;
  background: #fefefe;
  margin: 12px 0 0 0;
  border: 2px solid #bbb;
}

input {
  top: 0;
}

input:nth-child(1) {
  transition: all 0.5s 1s ease;
}

input:nth-child(2) {
  transition: all 0.7s 1s ease;
}

textarea {
  top: 0;
  opacity: 1;
  max-height: 100px;
  transition: all 0.9s 1s ease;
}

h1 {
  top: 0;
  opacity: 1;
  text-align: center;
  font-size: 24px;
  text-transform: uppercase;
  color: #cb9a4b;
  margin-bottom: 32px;
  transition: all 0.3s 1s ease;
}

.form {
  width: 64px;
  height: 64px;
  background: #6c4a27;
  border: 6px solid #cb9a4b;
  box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
  position: fixed;
  right: 10px;
  bottom: 0;
  z-index: 9;
}

.form .btn-xl {
  display: block;
  margin: 30px auto;
}

.form::before,
.form::after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 0px;
  height: 0px;
  opacity: 1;
  left: 10px;
  z-index: 100;
  transition: all 0.1s linear;
  -webkit-transform: scale(0.9999, 0.9999);
  transform: scale(0.9999, 0.9999);
}

.form::before {
  top: 15px;
  transform: perspective(1000) rotateX(0deg);
  transform-origin: 50% 0;
  border-top: 11px solid #fff;
  border-right: 16px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid transparent;
}

.form::after {
  top: 17px;
  border-top: 11px solid transparent;
  border-right: 16px solid #fff;
  border-bottom: 11px solid #fff;
  border-left: 16px solid #fff;
}

.form:hover::before {
  transform: perspective(1000) rotateX(180deg);
  transform-origin: 50% 0;
}

@-moz-keyframes openForm {
  0% {
    width: 64px;
    height: 64px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 320px;
    height: 450px;
  }
}

@-webkit-keyframes openForm {
  0% {
    width: 64px;
    height: 64px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 320px;
    height: 450px;
  }
}

@-o-keyframes openForm {
  0% {
    width: 64px;
    height: 64px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 320px;
    height: 450px;
  }
}

@keyframes openForm {
  0% {
    width: 64px;
    height: 64px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 320px;
    height: 450px;
  }
}


/*@media (max-width: 1000px) {
  .form {
    display: none;
  }
  .hide-own {
    display: block !important;
  }
  #etc {
    display: block !important;
  }
  #del {
    display: none !important;
  }
}*/

.form .form-control {
  background: none !important;
  border: none !important;
  height: 70px !important;
}

.date {
  line-height: 18px !important;
}

.form h1 {
  margin-bottom: 10px;
}

.form .btn {
  margin: 10px auto;
  padding: 10px 45.2px;
}

.close-btn {
  position: absolute;
  right: 10px;
  top: 10px !important;
  font-size: 20px;
  width: 20px;
  height: 20px;
  z-index: 10;
  background: #f00;
  display: none;
}

.open-btn {
  position: absolute;
  right: 10px;
  top: 10px !important;
  font-size: 20px;
  width: 20px;
  height: 20px;
  z-index: 10;
  background: #000;
}

.form.active .close-btn {
  display: block;
}

.form.active .open-btn {
  display: none;
}

.form#close {
  -webkit-animation: closeForm 1.4s;
  -webkit-animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
  animation: closeForm 1.4s;
  animation-timing-function: cubic-bezier(0.9, 0.1, 0.1, 0.9);
}

@-moz-keyframes closeForm {
  0% {
    width: 320px;
    height: 450px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 64px;
    height: 64px;
  }
}

@-webkit-keyframes closeForm {
  0% {
    width: 320px;
    height: 450px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 64px;
    height: 64px;
  }
}

@-o-keyframes closeForm {
  0% {
    width: 320px;
    height: 450px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 64px;
    height: 64px;
  }
}

@keyframes closeForm {
  0% {
    width: 320px;
    height: 450px;
  }
  50% {
    width: 320px;
    height: 64px;
  }
  100% {
    width: 64px;
    height: 64px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Форма -->
<div class="form">
  <i class="fa fa-times open-btn" aria-hidden="true"></i>
  <i class="fa fa-times close-btn" aria-hidden="true"></i>
  <h1>Форма записи</h1>
  <form action="mail/little_me.php" method="post" id="contactForm">
    <div class="form-control">
      <input type="text" placeholder="Ф.И.О." required data-validation-required-message="Пожалуйста, заполните это поле!" name="name_little" id="name_little" />
      <p class="help-block text-danger"></p>
    </div>
    <div class="form-control">
      <input type="tel" placeholder="Номер телефона" required data-validation-required-message="Пожалуйста, введите свой номер!" name="phone_little" id="phone_little" />
      <p class="help-block text-danger"></p>
    </div>
    <div class="form-control">
      <input type="text" placeholder="Курс" required data-validation-required-message="Выберите курс!" name="curs_little" id="curs_little" />
      <p class="help-block text-danger"></p>
    </div>
    <div class="form-control">
      <input type="email" class="date" required data-validation-required-message="Пожалуйста, напишите почту!" name="email_little" id="email_little" placeholder="Почта">
    </div>
    <div class="success"></div>
    <button type="submit" class="btn-down btn btn-xl" style="margin-bottom: 50px;">
          <span class="btn-paint"></span>
          <span class="btn-paint"></span>
          <span class="btn-paint"></span>
          <span class="btn-paint"></span>
          <span class="btn-label">Отправить</span>
        </button>
  </form>
</div>

3
  • добавил CSS. Посмотри, ибо с ним картина более ясна
    – KEZOV
    2 авг 2017 в 12:20
  • @Кенан нет там никакого css
    – Cheg
    2 авг 2017 в 12:21
  • теперь CSS на месте
    – KEZOV
    2 авг 2017 в 12:28
3

Не удаётся удалить класс в jquery? Его удается удалить, но он же сразу добавляется обратно. Ты повесил обработчик события "Клик" на родительский элемент, и потом вешаешь еще один дочерний. В результате срабатывают сразу два обработчика, так как элемент с классом '.close-btn' вложен в элемент с классом '.form'.

1

По мимо addClass и removeClass есть еще attr. Я часто не хочу заморачиваться и просто делаю:

$(object).attr("class", "myClass"); 

Этот способ работает безотказно :)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.