1

テキスト div の基本的なグリッドである jQuery で単純な css とクラスの変更があり、すべての高さが 470 ピクセルで、オーバーフローが非表示に設定されています。その中に含まれるすべてのテキストを表示し、単純な 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 がうまくフェードインするか、スムーズに下に伸びるかを探しています。実際にアニメーション化するだけなので、変化はそれほど突然ではありません。これが可能かどうかさえわかりませんか？どんな提案でも大歓迎です！

4

1 に答える 1

1

高さを設定する場所を次のいずれかに変更できます。

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

またはあなたのCSSに追加します（簡潔にするために接頭辞はありません）：

.journal-block {
    transition: height 400ms;
}
于 2013-07-06T17:06:38.160 に答える