jQuery toggleClass - easing isn't working

Question

I am having problems getting the easing property of the toggleClass to work. I have searched on this site and others, but still cannot get it to work as expected. The class is being toggled just fine, but it does not ease in or out smoothly.

Here is my code sample: DEMO

Here are (all) the scripts I'm 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.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>

I have a sneaky suspicion it has something to do with the scripts I'm loading (or maybe not loading?) because I've reviewed the code several times and compared it directly to the jQuery docs. I'm also very new to jQuery.

What I'm trying to accomplish is something similar to a clamshell effect. On page load the <div> is either being displayed or hidden depending on a value taken from the database and the checkbox is meant to toggle the <div> open or closed.

Grebe

Answer 1

In your demo code I changed:

.hideMe { display:none; }

to

.hideMe { opacity: 0; }

This works with the easing effect, but this creates a problem where the element is just taking up space. It's not super-elegant, but I've solved that problem for you here by using a second 'removeMe' class here:

https://jsfiddle.net/je7d9wgr/

Bonus:

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

Bonus 2:

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

https://jsfiddle.net/fuzduh5g/

Izak

I actually added <script src="https://code.jquery.com/jquery-1.10.2.js"></script> in an attempt to get this working, it wasn't there before. If you look at my DEMO I have loaded jQuery core and UI, but the effect still doesn't work. – Grebe

I'm sorry, I didn't think it was relevant at first, but there is more content below the <div> and the opacity: 0; leaves an empty space when not displayed. – Grebe

You're right, I've updated the answer, not sure if it's the cleanest way, but it works. – Izak

This still doesn't really animate, which was my original problem :-/ – Grebe

I'm not sure how you're trying to animate this. You could forego the whole class-based/easing approach, and instead use jQuery's slideToggle(), or slideUp() / slideDown() methods. – Izak

Let us continue this discussion in chat. – Grebe

Answer 2

This can also be done using css transitions, no need for jquery easing effects

Here is a simple demonstration.

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

Working JS Fiddle

Working 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>

Cespitose

Answer 3

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

Adding another class that is in charge of the "display: none", and toggling 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.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>

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

Prakrit