How to add a fade effect when changing classes?

Question

I don't know how to add an animation effect when the classes are changed.

Here is my code:

$("#a-button").click(function() {
    $("#a-div").toggleClass("hidden show");
});

This works but it doesn't have any effect when changing the classes.I want to make it smoother, maybe something like fading in and out. How can i do that?

did you google "jQuery fade in and fade out" ?? because they have methods for exactly that. Also, this would be something you would do by adding css transitions to the element. — rlemon, Oct 04 '16 at 15:23
I know, but i coulden't make it interact with the change. It seemed broken — Sadegh Shaikhi, Oct 04 '16 at 15:24
then at the very least you should post the code you attempted. — rlemon, Oct 04 '16 at 15:24
$("#other-certs").toggleClass("hidden show").fadeIn('slow'); — Sadegh Shaikhi, Oct 04 '16 at 15:28
You want to show/hide the div with id="a-div" alternatively when clicking thr button — Razvan Zamfir, Oct 04 '16 at 15:28
.fadeIn('slow') doesn't make sense there. don't just sling spaghetti at the wall. — Kevin B, Oct 04 '16 at 15:29
[***"You probably forgot to give a-div a transition."***](http://stackoverflow.com/questions/39856105/how-to-add-a-fade-effect-when-changing-classes?noredirect=1#comment67000361_39856105) — Kevin B, Oct 04 '16 at 15:30

Zakaria Acharki · Accepted Answer · 2016-10-04T16:17:34.670

0

You could use fadeOut()/fadeIn() with hasClass() condition to check the if the div has a specific class:

$('.show_hide').click(function() 
{
  if($('#target').hasClass('show'))
    $('#target').fadeOut('normal');
  else
    $('#target').fadeIn('normal');
    
  $('#target').toggleClass("hidden show");
});

#target {
  background: green;
  margin-bottom:15px;
  height:150px;
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="show_hide">Show / Hide</button>
<div id="target" class='show'></div>

edited Oct 04 '16 at 16:17

answered Oct 04 '16 at 15:29

Zakaria Acharki

66,747
15
75
101

See [THIS](https://jsfiddle.net/k479fbyj/) jsfiddle. – Razvan Zamfir Oct 04 '16 at 15:37
I saw @RazvanZamfir.. instead of `addClass/removeClass` i prefer to use `toggleClass()` and instead of `:visible` it'll be better to check the class IMO. glad i could helps. Happy coding. – Zakaria Acharki Oct 04 '16 at 16:16

score -1 · Answer 2 · answered Oct 04 '16 at 15:24

-1

Try this and let me know. It is fadeToggle by jQuery.

$("#a-button").click( 
  function() {
    $("#a-div").fadeToggle();
  });

answered Oct 04 '16 at 15:24

Sasuke91

94
8

How to add a fade effect when changing classes?

2 Answers2