How can I animate the addClass() and removeClass jQuery methods?

Question

I'm working on a site and want to display and hide sections of it by adding ".hidden" bootstrap class under click events. Basically:

  $('selector').click(function(){
     $('*part-to-hide*').addClass("hidden");
     $('*part-to-show*').removeClass("hidden");
   }

It's working properly but needs some smooth animations. What are my options?

Note: while I'v seen similar questions, I'd consider mine different (and thus not a duplicate) as it centers around the use of the bootstrap "hidden" class. On that note, I'd appreciate it if answers tackle the issue while sticking to the main idea of the code, which is adding and removing the "hidden" class to an element.

What does css property that class use for hiding element? `display : none` ? — MysterX, Jul 31 '17 at 12:54
"hidden" is a predefined bootstrap class which hides the element. I'm not sure what code is done in the background, but it might be hiding it by modifying the display property to none. — M Zein, Jul 31 '17 at 13:43

score 0 · Answer 1 · answered Jul 31 '17 at 12:54

0

just assign a transition property to your element ;) Check here for more info: https://www.w3schools.com/css/css3_transitions.asp

Fiddle: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

answered Jul 31 '17 at 12:54

Ryosaku

453
4
14

Farhad Bagherlo · Answer 2 · 2017-07-31T13:15:28.383

$('#selector').on('click',function(){
    if($(this).attr("data-animate")=="0"){
      $('#Div1').removeClass('Div2').addClass('Div1');
      $(this).attr("data-animate","1");
           $(this).val("Change color");
    }
    else{
     $('#Div1').removeClass('Div1').addClass('Div2');
          $(this).attr("data-animate","0");

                 $(this).val("start animate");
    }
    
     
});

.Div2{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example2;
    animation-duration: 4s;
}

.Div1{

    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:100px;}
    75%  {background-color:green; left:0px; top:100px;}
    100% {background-color:red; left:0px; top:0px;}
}

@-webkit-keyframes example2 {
    0%   {background-color:red;}
    25%  {background-color:yellow; }
    50%  {background-color:blue; }
    75%  {background-color:green; }
    100% {background-color:red;}
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="selector" type="button" data-animate="0" value="start animate"/>
<div id="Div1"></div>

score 0 · Answer 3 · answered Jul 31 '17 at 12:58

$( document ).ready(function() {
    $(".togglediv").on('click',function(){
      $(".showdiv").toggleClass("hidden");
      $(".hidediv").toggleClass("hidden");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
       <div class="parent">
        <div class="col-md-6 col-sm-6 col-xs-6">
             <div class="showdiv hidden">
             show div
             </div>   
              <div class="hidediv">
             hide div
             </div> 
        </div>
        <button class="togglediv">show/hide content</button>
    </div>
</div></div>

How can I animate the addClass() and removeClass jQuery methods?

3 Answers3