adding animation on addClass + removeClass

Question

I am trying to animate a smooth transition of simply showing and hiding a div through fadeIn + zoom.

I'm adding a class ('hide') to div1, while removing a class ('hide') from div2 so that when you click div1 - it disappears while div2 fades and zooms into view.

HTML

<div class="parentWrapper">
  <div class="div1">HELLO</div>
  <div class="div2 hide">GOODBYE</div>
</div>

JS

$('.div1').on('click', function() {
   $(this).addClass('hide', 1000);
   $(this).parent().find('.div2').removeClass('hide', 1000);
}

The class 'hide' is inherited from bootstrap...but the above does not work...why?!

Note, the reason I'm using $(this).parent().find() instead of just $('div2') is because in my actual code , there are 2 divs with the same class names. I need to make sure I'm animating the correct divs that the user is interacting with rather than the other separate set of div1+2.

all the css attribtues can't be animated... the hide class just sets the display to none which cannot be aniated — Arun P Johny
– Arun P Johny, Commented Feb 25, 2016 at 4:14

Arun P Johny · Accepted Answer · 2016-02-25 04:22:43Z

1

You can't animate the display: none property. Only css rules with numeric values can be animated.

In this case you could use a fade in/out or a slide in/out animation like

jQuery(function($) {
  $('.div1').on('click', function() {
    $(this).fadeOut(1000, function() {
      $(this).addClass('hide');
    });
    var $div2 = $(this).parent().find('.div2').removeClass('hide').css('display', 'none').fadeIn(1000);
  })
});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<div class="parentWrapper">
  <div class="div1">HELLO</div>
  <div class="div2 hide">GOODBYE</div>
</div>

answered Feb 25, 2016 at 4:22

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

codinginnewyork Over a year ago

Yesss this worked! Thanks. Curious to know why we're setting the css display to none for div2? I immediately thought it doesn't make sense since div2 is what we're trying to display, but found it doesn't work without it

Arun P Johny Over a year ago

@YNINNY because for fadeIn to work the display should be none, but with the hidden class you have !important set so it won't work with it

shu · Accepted Answer · 2016-02-25 04:20:08Z

0

Please try the below code,i have added 'easing effect' for animination.

$('.div1').on('click', function () {
  $(this).addClass("hide", 1000, "linear");
  $(this).parent().find('.div2').removeClass('hide', 2000, 'linear');
});

edited Feb 25, 2016 at 4:20

answered Feb 25, 2016 at 4:07

shu

1,95612 silver badges19 bronze badges

2 Comments

codinginnewyork Over a year ago

Thanks. I tried .next() and the divs are showing/hiding correctly, but the animations aren't kicking in.

codinginnewyork Over a year ago

thanks shu! this still didn't work for me, but may be due to what arun mentioned about about css animations not working on display-none properties!

Collectives™ on Stack Overflow

adding animation on addClass + removeClass

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related