Question

我在jQuery中有一个简单的css和类更改，一个基本的文本div网格，全部高度为470px，溢出设置为隐藏，单击“read more”更改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();
    });
});

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

Answer 1

您可以将设置高度的位置更改为：

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

或在你的CSS添加中（简洁没有前缀）：

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

jQuery：动画css和类更改

1 个答案: