title: jQuery: Animate css and class change
body: <p>I have a simple css and class change in jQuery, a basic grid of text divs, all at 470px in height with the overflow set to hidden, clicking on 'read more' changes the class and css of the div, extending the height to show all the text contained inside it, and always line up at the bottom with the grid using a simple Math.floor function. Problem is the class and css change is way to sudden and looks a bit clumsy.<br>
  Here's a jsFiddle demo: <a href="http://jsfiddle.net/neal_fletcher/fJcjE/" rel="nofollow">http://jsfiddle.net/neal_fletcher/fJcjE/</a> <br>
  jQuery:</p>
  
  <pre><code>$(document).ready(function () {
      var $container = $('#main-grid');
  
      $container.imagesLoaded(function () {
          $container.isotope({
              itemSelector: '.grid-block, .grid-block-long',
              animationEngine: 'best-available',
              masonry: {
                  columnWidth: 5
              }
          });
      });
  
      $('.grid-block-text p').hide().filter(":first-child").show();
  
      $('.read-more').click(function () {
          var $this = $(this),
              $parent = $this.parent('.grid-block');
          $this.hide();
          $this.nextAll('.grid-block-text')
              .children('p').fadeIn('slow');
          $this.siblings('.read-less').fadeIn('slow');
          $parent.css('height','auto');
          var newHeight = $parent.height();
          newHeight = (Math.floor((newHeight+29)/330)+1)*330-29;
          $parent
              .css('height',newHeight)
              .removeClass('grid-block')
              .addClass('grid-block-long');
          //$('#main-grid').isotope('reLayout');
          $container.isotope('reLayout');
      });
  
      $('.read-less').click(function () {
          var $this = $(this);
          $this.hide();
          $this.nextAll('.grid-block-text')
              .children("p:not(:first-child)").fadeOut('fast');
          $this.siblings('.read-more').fadeIn('slow');
          $this.parent('.grid-block-long')
              .css('height',300)
              .removeClass('grid-block-long')
              .addClass('grid-block');
          $('#main-grid').isotope('reLayout');
          $container.isotope();
      });
  });
  </code></pre>
  
  <p>Click on 'Read More' and the div will extend downwards due to the css and class change, the bottom of the div will always align to the divs around it so the grid is consistent. Only problem is once you've clicked, the change is instant, I'm looking for the div to fadeIn nicely, or even extend downwards smoothly, just animate really so the change isn't so sudden. I'm not even sure if this is possible? Any suggestions would be greatly appreciated!</p>