jQuery animate height

by

You can store the height just before slimming it down to 30px on page load, for example:

$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });

Then in your click handler:

$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});

So what this does is get the .height() (run this in document.ready) before the overflow: hidden it set, and stores it via $.data(), then in the click handlers (via .toggle() to alternate), we use that value (or 30) every other click to .animate() to.

More Related Contents:

  1. Slide DIV from left after load the website
  2. How can I create a “Please Wait, Loading…” animation using jQuery?
  3. How to Use slideDown (or show) function on a table row?
  4. How to scroll up or down the page to an anchor using jQuery?
  5. How can I animate multiple elements sequentially using jQuery?
  6. jQuery using append with effects
  7. How do I change the background image using jQuery animation?
  8. How do you make an element “flash” in jQuery
  9. Chaining jQuery animations that affect different elements
  10. How can I execute multiple, simultaneous jquery effects?
  11. typing animated text
  12. How can I create a “Please Wait, Loading…” animation using jQuery?
  13. jQuery Animation – Smooth Size Transition
  14. jQuery toggle animation
  15. CSS3 equivalent to jQuery slideUp and slideDown?
  16. jQuery animate() and browser performance
  17. How to delay jquery animation?
  18. Sliding divs horizontally with JQuery
  19. What is alternative to use after jQuery 1.9 removed .toggle(function,function)?
  20. Build image slider with carouFredSel with this requirements? [closed]
  21. How to disable anchor “jump” when loading a page?
  22. How to change page in jQuery mobile (1.4 beta)?
  23. Number nested ordered lists in HTML
  24. return false from jQuery click event
  25. Get height of div with no height set in css
  26. How to use jQuery to show/hide divs based on radio button selection?
  27. jquery nth child that is currently visible
  28. Post JSON to Python CGI
  29. jQuery get input value after keypress
  30. JQuery Bootstrap Multiselect plugin – Set a value as selected in the multiselect dropdown

Leave a Comment