Geek Answers Handbook

How to make a fluid transition

I want when you click on the switch to change the contents, and when the field changes height, do a fluid transition. I tried using the transition property, but does not work = /

MY CODE

.main-form-show {
     background: #fff;
     padding: 20px;
     max-width: 500px;
     margin: auto;
     border-radius: 10px;
     margin-top: 250px;
     transition: 1s;
    }

Can anybody help me?

Thanks!

+4
source share
2 answers

Here's how to do it:

  • Get the height of the div to display (while it is still hidden).
  • Set the height of the div to display at the height of the current displayed div.
  • Hide the currently displayed div.
  • Show new div.
  • Animate the height of the new div with what it should be (which was done in the first step).

, div, :

$div.css({ position: 'absolute', visibility: 'hidden', display: 'block' });
var height = $div.height();
$div.css({ position: 'static', visibility: 'visible', display: 'none' });

jsfiddle

, html css:

(1) div 'form-show-item-3', div. .

(2) . <p> div div, - .

div.dinamic-form-content {
    padding: 1px;
}
+1

jQuery .

$("main-form-show").animate({
     //you code here
});

http://www.w3schools.com/jquery/jquery_animate.asp

0

More articles:


All Articles