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.

Lunster · Accepted Answer · 2016-07-31T16:48:52.903

4

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/

edited Jul 31 '16 at 16:48

answered Jul 31 '16 at 15:23

Lunster

896
6
17

I actually added `` 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. – Andrew Fox Jul 31 '16 at 15:25
I'm sorry, I didn't think it was relevant at first, but there is more content below the `
` and the `opacity: 0;` leaves an empty space when not displayed.
– Andrew Fox Jul 31 '16 at 15:30
You're right, I've updated the answer, not sure if it's the cleanest way, but it works. – Lunster Jul 31 '16 at 15:38
This still doesn't really animate, which was my original problem :-/ – Andrew Fox Jul 31 '16 at 16:20
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. – Lunster Jul 31 '16 at 16:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118752/discussion-between-andrew-fox-and-ianl). – Andrew Fox Jul 31 '16 at 16:24

M.Tanzil · Answer 2 · 2016-07-31T18:22:02.237

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>

score 1 · Answer 3 · answered Jul 31 '16 at 16:56

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/

jQuery toggleClass - easing isn't working

3 Answers3