Geek Answers Handbook

JQuery toggleClass - not working

I'm having trouble getting the easing property for toggleClass work. I searched this site and others, but still I can’t get it to work as expected. The class switches just fine, but it does not relax or smoothly.

Here is my sample code: DEMO

Here are (all) the scripts that are loading in my project:

 <!-- 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.imtqy.com/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>

I have a suspicious suspicion that it has something to do with the scripts that I download (or maybe not download?), Because I looked at the code several times and compared it directly with jQuery docs. I am also very new to jQuery.

What I'm trying to accomplish looks like a clamshell effect. When the page is loaded, the <div> displayed or hidden depending on the value taken from the database, and the flag is used to switch the <div> to open or close.

+6
source share
3 answers

In your demo code, I changed:

.hideMe { display:none; }

to

.hideMe { opacity: 0; }

This works with the weakening effect, but it creates a problem when the element just takes up space. This is not very elegant, but I solved this problem for you here using the second class 'removeMe' here:

https://jsfiddle.net/je7d9wgr/

Bonus:

Alternatively use slideToggle() , for example here: https://jsfiddle.net/gL0vnhc2/

Bonus 2:

This code checks the current state of the flag, and then conditionally animates based on the value:

https://jsfiddle.net/fuzduh5g/

+4
source

This can also be done with css transitions , no jquery easing effects needed

Here is a simple demo.

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); });

Work JS Fiddle

Job Snippet

 $(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
source

If you want to use the toggleClass option, this is a bit complicated, but will work.

Adding another class that is responsible for "display: none", and toggles it after or before the actual animated class.

 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.imtqy.com/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>

or fiddle if you prefer - https://jsfiddle.net/63o92nms/1/

+1
source

More articles:


All Articles