i'm having trouble animating a div expanding. My JQuery function does what it's supposed to, but the animation doesn't appear. I have tried both transition : all and transition : max-height but none seems to work. Also something very weird happens, when i want to hide my div again. It appears that there's some kind og delay before it disappears. This delay matches the time of the animation, but i can't figure out what's wrong. Please help.

Here's a fiddle: /

i'm having trouble animating a div expanding. My JQuery function does what it's supposed to, but the animation doesn't appear. I have tried both transition : all and transition : max-height but none seems to work. Also something very weird happens, when i want to hide my div again. It appears that there's some kind og delay before it disappears. This delay matches the time of the animation, but i can't figure out what's wrong. Please help.

Here's a fiddle: https://jsfiddle/vbqc2c27/1/

• javascript
• jquery
• html
• css

3 Answers 3

You can't animate from a specific value (0px) to a relative value (100%). You need to use specific values:

Updated fiddle

$("p").on("click",function() {
    if($("#test").css("max-height") == "0px") {
    $("#test").css("max-height","100px");
  }
    else {
    $("#test").css("max-height","0px");
  }
});

Change "100%" to "100px" and it works fine.

Of course, for that paragraphs 100px isn't tall enough (the text is clipped). So you may need to add a function to calculate the auto-height in pixels.

Updated fiddle - simple solution without delay

Fix delay solution:

Put cubic-bezier(0, 1, 0, 1) transition function for element.

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

Or you can use slideToggle() function which is much more simplier than that :)

See this fiddle

JS

$("p").on("click",function() {
    $("#test").slideToggle();
});

CSS

div {
  display: none;
}