0

I have a jquery function that adds a class to a div, to hide it

jQuery(document).ready(function() {
    jQuery('.control').click(function() {
        jQuery('.mob-nav').toggleClass('hide');
    });
});

This works fine, but now I want to add a transition to this, using CSS. So, I used

.hide { 
    -webkit-transition: all 2s cubic-bezier(0.04, 0.87, 0, 0.96);
    display: none;     
}

But it just won't work. I tried adding the transition to the div from the beginning. Also tried it on the whole body, it doesn't do anything.

Andrew LaPrise
  • 3,373
  • 4
  • 32
  • 50
Jon
  • 21
  • 2
  • 3
    You can’t use `display` with transitions, because it’s a non-animatable property. Use `visibility` instead. Also, please don’t rely on vendor prefixes (`-webkit-`); add the standard property. – Sebastian Simon Sep 16 '15 at 19:34
  • 2
    `display` is not one of the properties you _can_ transition. – CBroe Sep 16 '15 at 19:34
  • Thanks. I tried to animate the 'height' from 0 to auto, but that doesn't work either. So I resorted to animation max-height, from a fixed value, to zero. – Jon Sep 16 '15 at 19:41

1 Answers1

1

Display can not be transitioned. You can use this method instead: 

jQuery('.mob-nav').hide(2000)

The argument to hide() is the transition time in miliseconds. If you don't want use hide(), take a look at this answer: Transitions on the display property.

Community
  • 1
  • 1
Mammad2c
  • 1,255
  • 2
  • 10
  • 13