jQuery:动画 css 和类更改

Question

我在 jQuery 中有一个简单的 css 和类更改，一个基本的文本 div 网格，高度均为 470 像素，溢出设置为隐藏，单击“阅读更多”更改 div 的类和 css，扩展高度以显示其中包含的所有文本，并始终使用简单的 Math.floor 函数在底部与网格对齐。问题是类和 css 的变化是突然的，看起来有点笨拙。
这是一个 jsFiddle 演示:http://jsfiddle.net/neal_fletcher/fJcjE/
jQuery:

$(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();
    });
});

点击“阅读更多”，由于 css 和类的变化，div 将向下延伸，div 的底部将始终与周围的 div 对齐，因此网格是一致的。唯一的问题是一旦你点击，变化是即时的，我正在寻找 div 很好地淡入，或者甚至平滑地向下延伸，只是真的动画所以变化不是那么突然。我什至不确定这是否可能？任何建议将不胜感激!

Answer 1

您可以更改设置高度的位置:

$parent.animate({ height: newHeight }, 'slow');

或在您的 CSS 中添加(为简洁起见没有前缀):

.journal-block {
    transition: height 400ms;
}