jQuery toggleClass - ослабление не работает

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

вот мой пример кода: демо

вот (все) скрипты, которые я загружаю в свой проект:

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

у меня есть подозрение, что это имеет какое-то отношение к сценариям, которые я загружаю (или, может быть не заряжается?) потому что я просмотрел код несколько раз и сравнил его непосредственно с документами jQuery. Я очень новой для jQuery.

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

6
jquery toggleclass

3 ответов

в вашем демо-коде я изменил:

.hideMe { display:none; }

to

.hideMe { opacity: 0; }

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

https://jsfiddle.net/je7d9wgr/

бонус:

в качестве альтернативы использовать slideToggle(), пример здесь:https://jsfiddle.net/gL0vnhc2/

Бонус 2:

этот код проверяет текущее состояние флажка, а затем условно анимирует на основании значения:

https://jsfiddle.net/fuzduh5g/

4

это также можно сделать с помощью css transitions, отсутствие потребности для jQuery облегчая влияния

вот простая демонстрация.

в CSS

.hideMe {
 height:0px !important;
 border:none !important;
 overflow:hidden;
}

 #create-login-group {
  -webkit-transition:all 0.4s ease;
  transition: all 0.4s ease;
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}

JS

$( "#create-login-button" ).change(function() {
   $('#create-login-group').toggleClass("hideMe", 100);        
});

работающего JS Fiddle

работающего фрагмент

$(function(){
$( "#create-login-button" ).change(function() {
	$('#create-login-group').toggleClass("hideMe", 100);        
	});
});
.hideMe {
  height:0px !important;
  border:none !important;
  overflow:hidden;
}

#create-login-group {
    -webkit-transition:all 0.4s ease;
  transition: all 0.4s ease;
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="create-login-button" role="button">

<div id="create-login-group" class="hideMe">
  Some text is here
</div>
<div>
  more content
</div>
4

Если вы хотите использовать опцию toggleClass, это немного сложно, но будет работать.

добавление другого класса, который отвечает за "display: none", и переключение его после или до фактического анимированного класса.

var lGroupEle = $('#create-login-group');
$("#create-login-button").change(function() {
  if ($(lGroupEle).hasClass("hidden")) {
    $(lGroupEle).toggleClass("hidden");
    $(lGroupEle).toggleClass("hideMe", 1000, "easeInOutQuad");
  } else {
    $(lGroupEle).toggleClass("hideMe", 1000, "easeInOutQuad", function() {
      $(lGroupEle).toggleClass("hidden");
    });
  }
});
.hideMe {
  opacity: 0;
}
.hidden {
  display: none;
}
#create-login-group {
  border: 2px solid #000;
  height: 100px;
  width: 150px;
}
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<input type="checkbox" id="create-login-button" role="button">

<div id="create-login-group" class="hidden hideMe">
  Some text is here
</div>
<div>
  more content
</div>

или скрипка, если вы предпочитаете -https://jsfiddle.net/63o92nms/1/

1